Javascript TypeError:无法读取属性'；名称'；使用firebase时出现未定义错误的原因

当我尝试运行我的应用程序时，出现以下错误

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

非常感谢您的帮助

编辑：这是数据库结构：

---

错误告诉您，

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

的值，所以我们无法说明发生这种情况的原因-您必须调试您的代码和数据以找出原因。

请尝试使用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]);

---

请张贴数据库structure@Ashish我已经更新了问题，添加了必需的。你能看一下吗？我已经更新了问题，添加了必需的。你能看一下吗？