React+Firebase聊天应用：多用户头像显示异常问题求助

问题根源 #

你在ChatRoom组件渲染消息时，错误地将当前登录用户的头像状态传给了所有ChatMessage组件，而不是每条消息自身存储的发送者头像。尽管每条消息的photoURL已经正确存在Firestore中，但传递时用了全局的photoURL状态，导致所有消息显示同一个头像。

修复步骤 #

1. 移除ChatRoom中无用的头像状态 #

删掉ChatRoom组件里的photoURL状态和对应的useEffect，我们不需要再用这个全局状态管理头像：

// 移除以下代码
const [photoURL, setPhotoUrl] = useState(
    "https://api.adorable.io/avatars/23/abott@adorable.png"
);

useEffect(() => {
    if (auth.currentUser?.photoURL) {
        setPhotoUrl(auth.currentUser.photoURL);
    }
}, [auth]);

2. 修改消息渲染时的头像传递 #

在ChatRoom的messages.map循环里，把photoURL={photoURL}替换成photoURL={msg.photoURL}，让每条消息使用自身存储的发送者头像：

{messages &&
    messages.map((msg, i) => (
        <ChatMessage 
            key={msg.id}
            msg={msg.text} 
            uid={msg.uid} 
            photoURL={msg.photoURL} 
        />
    ))}

额外优化：移除空Fragment，给ChatMessage添加key={msg.id}，符合React列表渲染规范。

3. 给ChatMessage添加默认头像兜底 #

为避免部分消息无photoURL时显示异常，在ChatMessage组件中给头像设置默认值：

const ChatMessage = (props) => {
  const messageClass = props.uid === auth.currentUser?.uid ? "sent" : "recieved";
  const avatarUrl = props.photoURL || "https://api.adorable.io/avatars/23/abott@adorable.png";

  return (
    <div className={`message ${messageClass}`}>
      <img src={avatarUrl} alt="profile img" />
      <p>{props.msg}</p>
    </div>
  );
};

验证修改 #

重新运行项目，用两个不同账号发送消息，每条消息将显示对应发送者的头像。

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