TypeError：无法使用 Firebase 读取未定义错误的属性“名称”答案

【问题标题】：TypeError: Cannot read property 'name' of undefined error using firebaseTypeError：无法使用 Firebase 读取未定义错误的属性“名称”
【发布时间】：2021-02-15 02:24:42
【问题描述】：

我在尝试运行我的应用程序时收到以下错误

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]);

非常感谢任何帮助。

编辑：这是数据库结构：

【问题讨论】：

请发布数据库结构
@Ashish 我已经通过添加所需的内容更新了问题。你能看看吗？

标签： javascript reactjs firebase google-cloud-firestore

【解决方案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 的值，因此我们无法说明为什么会发生这种情况 - 您必须调试您的代码和数据才能弄清楚。

【讨论】：

我已通过添加所需内容更新了问题。你能看看吗？

【解决方案2】：

不要使用onSnapshot，而是使用get方法

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]);

【讨论】：