无法解构“_ref”的属性“聊天”，因为它是未定义的（火力基地和反应）

我有这段代码可以运行以从 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'的所有文档，并查看一个名为“users”的数组是否包含两个用户，如果他们这样做了，我会将它们全部返回并输入所有过滤后的文档在 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 用户中，它可以完美地按照我想要的方式运行，并且没有错误，但在其他一些用户中，我收到了上面的错误消息。

此外，chatLists 中的每个文档如下所示：