Firebase，Next-js 在页面重新加载时显示 TypeError答案

【问题标题】：Firebase, Next-js showing TypeError on page reloadFirebase，Next-js 在页面重新加载时显示 TypeError
【发布时间】：2022-08-04 05:52:21
【问题描述】：

图表.js

function Chat() {
  const [emails, setEmails] = useState([]);
  const userChatRef = db.collection(\"users\").where(\"email\", \"==\", auth.currentUser.email);
  const [chatSnapshot] = useCollection(userChatRef);
  useEffect(() => {
    db.collection(\"users\").get().then((snapshot) => {
      snapshot.docs.forEach((doc) => {
        setEmails(oldmails => [...oldmails, doc.data().email]);
      });
    });
  }, []);
  return (
    <div className=\"user-container\">
      <div className=\"user-nav\">
        <Image src={auth.currentUser.photoURL} width={35} height={35} />
      </div>
      <div className=\"chats\">
        {chatSnapshot?.docs[0]?.data()?.chats.map((chat) => {
          return <EachChat key={chat.email} chat={chat} />;
        })}
      </div>
    </div>
  );
}
export default Chat;

EachChat.js

function EachChat({ chat }) {
  const router = useRouter();
  const recipientChatRef = db.collection(\"users\").where(\"email\", \"==\", chat.email);
  const [recipientSnapshot] = useCollection(recipientChatRef);
  const imageUrl = recipientSnapshot?.docs[0]?.data()?.image;
  const redirectChat = () => {
    router.push(`/chat/${chat.uid}`);
  };
  return (
    <div className=\"d-flex each-chat\" onClick={redirectChat}>
      <Image src={imageUrl} width={35} height={35} />
      <div>{chat.email}</div>
    </div>
  );
}
export default EachChat;

[uid].js

function ChatComp() {
  return (
    <div>
      <Chat />
      <h1>This is a Chat</h1>
    </div>
  );
}
export default ChatComp;

我在comps\\Chats.js (14:26) @ Chat 处收到TypeError: Cannot read property \'email\' of null 的错误，但仅在我刷新[uid].js 页面时而不是在我重定向到同一页面时。 Chat 组件在刷新后也能正常工作。

另外为什么我只有在刷新后才得到错误，而不是在第一次加载时？

标签： firebase next.js

【解决方案1】：

这很可能是因为您试图在传递信息之前填充 HTML。如果您等待数据完全加载，这可能会解决您的问题。

function Chat() {

  const [loading, setLoading] = useState(true)
  const [emails, setEmails] = useState([]);
  const userChatRef = db.collection("users").where("email", "==", auth.currentUser.email);
  const [chatSnapshot] = useCollection(userChatRef);
  useEffect(() => {
    db.collection("users").get().then((snapshot) => {
      snapshot.docs.forEach((doc) => {
        setEmails(oldmails => [...oldmails, doc.data().email]);
        setLoading(false)
      });
    });
  }, []);
  return (<>

  {loading == true ? <h1>Loading...</h1> : <div className="user-container">
      <div className="user-nav">
        <Image src={auth.currentUser.photoURL} width={35} height={35} />
      </div>
      <div className="chats">
        {chatSnapshot?.docs[0]?.data()?.chats.map((chat) => {
          return <EachChat key={chat.email} chat={chat} />;
        })}
      </div>
    </div>}

  </>);
}
export default Chat;

【讨论】：