询问如何从 firebase 获取反应数据

如何解决询问如何从 firebase 获取反应数据

import React,{ useEffect,useState } from "react";
import { dbService } from "./myFirebase";

function Editor({ userObj }) {
  const [myContent,setMyContent] = useState("");
  const [myContents,setMyContents] = useState([]);
  const getValue = (event) => {
    const { name,value } = event.target;
    setMyContent({ ...myContent,[name]: value });
  };

  useEffect(() => {
    console.log("1",myContents);
    dbService.collection("contents").onSnapshot((snapshot) => {
      const communityArray = snapshot.docs.map((doc) => ({
        id: doc.id,...doc.data(),}));
      setMyContents(communityArray);
      console.log("2",myContents);
    });
    console.log("3",myContents);
  },[]);
  console.log("4",myContents);

  const addContent = async (event) => {
    event.preventDefault();
    await dbService.collection("contents").add({
      content: myContent,createdAt: Date.Now(),});
    setMyContent("");
  };
  return (
    <div>
      <button type="submit" onClick={addContent}>
        {" "}
        input{" "}
      </button>
    </div>
  );
}
export default Editor;

当以这种方式输入数据时，我将其编码为在 Firebase 中保存和接收。

如果我打印日志，它会以空数组的形式出现，然后输入值。 所以当我收到它时，如果我说 console.log("10",myContents[0].id);，它会被正确接收，但是当我刷新它时，TypeError: Cannot read property'id' of undefined appears.

我认为是因为那个空数组，我该如何解决？ 您是否使用 async await for useEffect？我试过了，还是一样，是不是错了？