Javascript 对象作为React子对象无效（找到：具有键{content}的对象）。如果要呈现子对象集合，请改用数组

我正在使用react和firebase构建一个todo网站，但我得到一个错误，如下所示

错误：对象作为React子对象无效（找到：具有键{content}的对象）。如果要呈现子对象集合，请改用数组

所有组件如下所示

App.js

import './App.css';
import {useEffect, useState} from 'react'
import Todo from './Todo'
import FormControl from '@material-ui/core/FormControl';
import { Button, Input, InputLabel } from '@material-ui/core';
import db from './firebase';
import firebase from 'firebase'


function App() {

  const [inputcontent , setInputcontent] = useState("");
  const [inputtitle , setInputtitle] = useState("");

  const [todos , setTodos] = useState([]);

  
  useEffect(() => {
    db.collection('todos').orderBy('timestamp' , 'desc').onSnapshot(snapshot =>{
      setTodos(snapshot.docs.map(doc =>  ({id : doc.id ,  todo : doc.data()})));
    })
  } , []);

  const addTodo = (event) =>{
    event.preventDefault();

    db.collection("todos").add({
      title : inputtitle,
      content : inputcontent,
      timestamp : firebase.firestore.FieldValue.serverTimestamp()
    });

    setInputcontent("");
    setInputtitle("");
  }

  return (
    <div className="App">
      
      <h1>Todos List</h1>

      <form className = "form">
      <FormControl>
        <InputLabel>Enter Title</InputLabel>
        <Input className = "form__inside" type="text" value ={inputtitle} onChange = {(event) => setInputtitle(event.target.value)} />
      </FormControl>

      <FormControl>
        <InputLabel>Enter Todo</InputLabel>
        <Input className = "form__inside" type="text" value ={inputcontent} onChange = {(event) => setInputcontent(event.target.value)} />
      </FormControl>
      <Button className = "form__inside" type = "submit" onClick = {addTodo} disabled ={!inputtitle || !inputcontent} variant="contained" color="secondary">Add Todo</Button>
      </form>
      


      {
        todos.map(({id, todo}) =>(
          <Todo key = {id} id = {id} title = {todo.title} content = {todo.content}/>
        ))
      }
    </div>
  );
}

export default App;

Todo.js

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import './Todo.css'
import db from './firebase';
import { Button } from '@material-ui/core';

const useStyles = makeStyles({
    title: {
      fontSize: 20,
      fontWeight: 550,
    },

    paragraph: {
        fontSize : 20,
    }
  });

function Todo({id , title , content}) {
    const classes = useStyles();

    return (

            <div className = "each__todo">
                <Card>
                    <CardContent>
                        <Typography className={classes.title} >
                            {title}
                        </Typography>

                        <Typography className={classes.paragraph}>
                            {content}
                        </Typography>
                    </CardContent>
                </Card>
                <Button onClick = {event =>{ db.collection('todos').doc(id).delete()}}>Delete</Button>
                
            </div>
        
    )
}

export default Todo

firebase.js

import firebase from "firebase";


const firebaseApp = firebase.initializeApp({
    apiKey: "AIzaSyBS2UzzZAx1fOnensgiOy9YnYbOZ8CzE4A",
    authDomain: "todo-clone-b004b.firebaseapp.com",
    projectId: "todo-clone-b004b",
    storageBucket: "todo-clone-b004b.appspot.com",
    messagingSenderId: "775676178310",
    appId: "1:775676178310:web:23d69a5fb4db112fadc607",
    measurementId: "G-NNW9560NY7"
});

const db = firebaseApp.firestore();

export default db ;

请帮忙

---

谢谢你

你的错误是说

内容

是一个对象，因此无法呈现它如何解决？在

{content}

中，尝试执行

{String（content）}

检查

内容

的实际值。告诉我们值。@ShouryaSharma首先找出为什么您的

内容
是一个对象（检查您的数据库）。您还可以使用
JSON.stringify（content）
来检查它所包含的内容。谢谢您，实际上，在我的数据库中，在特定的Todo中，内容有单独的时间戳，这是因为我试图以其他方式编辑Todo。
.each__todo {
  padding: 10px;
  margin: 10px;
  width: fit-content;
}

import firebase from "firebase";


const firebaseApp = firebase.initializeApp({
    apiKey: "AIzaSyBS2UzzZAx1fOnensgiOy9YnYbOZ8CzE4A",
    authDomain: "todo-clone-b004b.firebaseapp.com",
    projectId: "todo-clone-b004b",
    storageBucket: "todo-clone-b004b.appspot.com",
    messagingSenderId: "775676178310",
    appId: "1:775676178310:web:23d69a5fb4db112fadc607",
    measurementId: "G-NNW9560NY7"
});

const db = firebaseApp.firestore();

export default db ;