无法解构“_ref”的属性 'chat'，因为它未定义（firebase 和反应）

Question

我有这段代码可以运行以从 firebase 集合中获取数据：

useEffect(() => {
db.collection("chatLists")
.onSnapshot((snapshot) => {
  if(snapshot) {
    let chattingLists = snapshot.docs.map((doc) => {
      if(doc.data().users.includes(user.email)) {
        return {
          chat: doc.data(),
          id: doc.id
        };
      }
    })
    if(chattingLists !== [undefined]) {
      setChatLists(chattingLists ? chattingLists : []);
    }
  }
})}, []);

基本上我正在获取集合 'chatLists' 的所有文档并查看一个名为“用户”的数组是否有两个用户包括当前使用该应用程序的用户名，如果他们这样做，我 return 它们和所有过滤后的文档都输入到 chattingLists 变量中。然后我将它设置为一个 useState 然后我尝试映射所有这些：

return (
<div>
  <button onClick={addChat}>
    Add a chat
  </button>
  <>
    {chatLists !== undefined && chatLists.map(({chat, id}) => (
      <p>{id}</p> {/*Anything that i try to get from the chat or id doesn't work and i get error message*/}
    ))}
  </>
</div>

)

但是，我收到错误消息：“无法解构‘_ref’的属性 'chat'，因为它未定义。”

奇怪的是，在某些 chrome 用户中，它可以完美地按照我想要的方式运行，没有错误，但在其他一些用户中，我会收到上面的错误消息。

此外，聊天列表中的每个文档如下所示：

Answer 1

您可以使用 array-contains 查询运算符，而不是从集合中获取所有文档并手动过滤文档。这将为您节省大量阅读费用。
您必须 return 来自 map 中的函数的值，但目前当文档不包含给定的电子邮件时您 return 什么都没有，因此没有定义该数组中的项目。

尝试重构代码，如下所示：

useEffect(() => {
  db.collection("chatLists")
    .where("users", "array-contains", "user.email")
    .onSnapshot((querySnapshot) => {
      const chats = querySnapshot.docs.map((d) => ({
        id: d.id,
        chat: d.data(),
      }));
      setChatLists(chats);
    });
}, []);

无法解构“_ref”的属性 'chat'，因为它未定义（firebase 和反应）

Cannot destructure property 'chat' of '_ref' as it is undefined (firebase & react)

javascript

firebase

reactjs

google-cloud-firestore

无法解构“_ref”的 属性 'chat'，因为它未定义（firebase 和反应）

Cannot destructure property 'chat' of '_ref' as it is undefined (firebase & react)

javascript

firebase

reactjs

google-cloud-firestore

无法解构“_ref”的属性 'chat'，因为它未定义（firebase 和反应）