类型错误：无法使用 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]);