React useState存储数组无法访问属性的问题求助

问题描述 #

开发基于Firestore的React聊天应用时，通过roomId从Firestore查询房间数据，console.log已确认数据拉取成功，但页面中roomDetails?.name无法显示内容，聊天标题为空。

控制台输出 #

[{…}]
0: {name: 'general'}
length: 1
[[Prototype]]: Array(0)

核心问题 #

你在useEffect中使用snapshot.docs.map()将查询结果转为数组存储，但页面中直接访问数组的name属性——数组本身没有name，只有数组里的第一个元素才是包含name的房间对象。

解决方案 #

根据你的场景选择以下两种方式之一：

方案1：仅处理单个房间（推荐） #

因为roomId对应唯一房间，无需用map返回数组，直接取第一个文档的数据：

useEffect(() => {
  const roomQuery = query(
    collection(db, "rooms"),
    where("name", "==", roomId)
  );
  if (roomId) {
    const unsubscribe = onSnapshot(roomQuery, (snapshot) => {
      // 直接取第一个文档的数据，转为单个对象
      setRoomDetails(snapshot.docs[0]?.data());
    });
    return () => unsubscribe();
  }
}, [roomId]);

页面中保持原写法即可：

<strong>#{roomDetails?.name}</strong>

方案2：保留数组格式（多房间场景） #

如果需要处理多个房间的情况，页面中需访问数组的第一个元素：

<strong>#{roomDetails?.[0]?.name}</strong>

修改后验证 #

修改后控制台输出会变为单个对象：

{name: 'general'}

页面将正确显示#general作为聊天标题。

内容的提问来源于stack exchange，提问作者Donnietentoes