類型錯誤：無法使用 firebase 讀取未定義錯誤的屬性“名稱”

Question

當我嘗試運行我的應用程序時出現以下錯誤

TypeError: Cannot read property 'name' of undefined

 26 | 
  27 |  useEffect(() => {
  28 |    if (roomId) {
> 29 |      db.collection("rooms")
     | ^  30 |        .doc(roomId)
  31 |        .onSnapshot((snapshot) => setRoomName(snapshot.data().name));
  32 | 

我已經在 Firestore 中定義了房間/消息和名稱。 我已經導入了 firebase.js 文件並添加了 firebase 配置。 這是我的 js 文件中拋出錯誤的代碼段。

import db, { auth, provider } from "./firebase";
import firebase from "firebase";
import React, { useState, useEffect } from "react";

.... code ...
function Chat() {

  const { roomId } = useParams();
  const [roomName, setRoomName] = useState("");
  const [messages, setMessages] = useState([]);
  const [{ user }, dispatch] = useStateValue();


  useEffect(() => {
    if (roomId) {
      db.collection("rooms")
        .doc(roomId)
        .onSnapshot((snapshot) => setRoomName(snapshot.data().name));

    }
  }, [roomId]);

很感謝任何形式的幫助。

編輯：這是數據庫結構：

Answer 1

該錯誤告訴您snapshot.data()返回未定義。 如果您查詢的位置 (/rooms/{roomId}) 沒有文檔，就會發生這種情況。 在訪問不存在的對象的屬性之前，您應該檢查這種情況。

.onSnapshot((snapshot) => {
    const data = snapshot.data();
    if (data) {
        setRoomName(data.name));
    }
    else {
        // decide what you want to do if there is no document
    }
}

由於我們看不到您的數據庫，也看不到roomId的值，因此我們無法說明為什么會發生這種情況——您必須調試代碼和數據才能弄清楚。

Answer 2

嘗試使用 get 方法而不是使用 onSnapshot

const getRoom = useCallback(async roomId => {
    if (roomId) {
      const room = await db.collection("rooms")
        .doc(roomId)
        .get();
      setRoomName(room.data().name);
    }
    setRoomName(null);
}, [])

useEffect(() => {
  getRoom(roomId)
}, [getRoom]);