React+Firebase聊天应用接收方photoURL读取未定义错误排查

问题概述 #

用React和Firebase开发聊天应用，其他页面可正常从Firestore读取photoURL等用户数据，但发送消息后接收方会触发以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'photoURL')

错误出现在<img src={chat[1].userInfo.photoURL} alt='' />这一行，仅接收方触发，发送方无异常。已通过console.log(Object.entries(chats))确认数组格式看似正常，怀疑问题出在ChatContext或Array.map逻辑中。

关键信息 #

出错代码片段 #

// 触发错误的img标签
<img src={chat[1].userInfo.photoURL} alt='' />

控制台输出的Object.entries(chats)结构 #

[
  ["chat_xxx", {
    userInfo: { photoURL: "https://xxx.com/avatar1.png", displayName: "用户A" },
    messages: [{ id: "msg1", text: "你好", senderId: "uid1" }]
  }],
  ["chat_yyy", {
    userInfo: { photoURL: "https://yyy.com/avatar2.png", displayName: "用户B" },
    messages: [{ id: "msg2", text: "嗨", senderId: "uid2" }]
  }]
]

ChatContext核心逻辑（参考原仓库结构） #

import { createContext, useState, useEffect } from "react";
import { db } from "../firebase";
import { useAuthContext } from "./AuthContext";

export const ChatContext = createContext();

export const ChatContextProvider = ({ children }) => {
  const { currentUser } = useAuthContext();
  const [chats, setChats] = useState([]);

  useEffect(() => {
    const getChats = async () => {
      const res = await db
        .collection("chats")
        .where("users", "array-contains", currentUser.uid)
        .get();

      const chatsData = res.docs.map((doc) => {
        // 匹配对方用户信息
        const userInfo = doc.data().users.find(u => u.uid !== currentUser.uid);
        return [doc.id, { ...doc.data(), userInfo }];
      });

      setChats(chatsData);
    };

    currentUser.uid && getChats();
  }, [currentUser.uid]);

  return (
    <ChatContext.Provider value={{ chats }}>
      {children}
    </ChatContext.Provider>
  );
};

解决方案 #

1. 给userInfo添加默认值，避免undefined #

在ChatContext的map逻辑中，当找不到对方用户信息时，返回空对象兜底：

const userInfo = doc.data().users.find(u => u.uid !== currentUser.uid) || {};

2. 渲染时用可选链做安全访问 #

直接在img标签中使用可选链操作符，防止userInfo为undefined时报错：

<img src={chat[1]?.userInfo?.photoURL || "/default-avatar.png"} alt="用户头像" />

（可替换/default-avatar.png为你的默认头像路径）

3. 检查Firestore数据完整性 #

确认所有chats文档的users数组都包含两个用户的完整数据（uid、photoURL等），避免某条聊天记录的users数组缺失接收方的用户信息。

4. 处理实时同步延迟 #

接收方可能因Firestore实时同步延迟，导致chats更新时某一项的userInfo尚未加载，可添加空值判断：

{chats.map(chat => (
  <div key={chat[0]} className="chat-item">
    {chat[1].userInfo ? (
      <img src={chat[1].userInfo.photoURL} alt="用户头像" />
    ) : (
      <div className="default-avatar"></div>
    )}
    {/* 其他聊天内容 */}
  </div>
))}

内容的提问来源于stack exchange，提问作者John Kelvin Atienza