React中无法根据Firestore的UID切换消息CSS类的问题求助

DevOps 小满

2026-8-13

解决React Firebase聊天应用的消息样式切换问题

问题根源

你的代码里有三个关键问题导致样式无法正确切换：

UID对比逻辑错误：在ChatMessage组件里，你把消息的字符串UID直接和auth.currentUser（用户对象）对比，两者永远不会相等，应该对比用户对象的uid属性。
CSS类名拼写错误：代码里写的是recieved，但CSS定义的类名是received，导致样式无法匹配。
头像URL传递错误：你给ChatMessage传递的是当前用户的头像，而非消息发送者的头像，应该传递每条消息自带的photoURL。

修改后的关键代码片段

1. 修正ChatRoom组件中传递ChatMessage的参数

// ChatRoom组件中渲染ChatMessage的部分
<ChatMessage
  key={msg.id} // 新增：添加唯一key避免React渲染警告
  msg={msg.text}
  uid={msg.uid}
  photoURL={msg.photoURL} // 改为传递消息发送者的头像URL
/>

2. 修正ChatMessage组件的样式判断逻辑和类名

import { useAuthState } from "react-firebase-hooks/auth"; // 新增：用hook获取用户状态更可靠

const ChatMessage = (props) => {
  const [user] = useAuthState(auth);
  // 对比当前用户的uid而非用户对象，同时修正类名拼写
  const messageClass = user?.uid === props.uid ? "sent" : "received";

  return (
    <div className={`message ${messageClass}`}>
      <img
        src={
          props.photoURL || "https://xsgames.co/randomusers/avatar.php?g=pixel"
        }
        alt="用户头像"
      />
      <p>{props.msg}</p>
    </div>
  );
};