集成Firebase后React的Chat组件渲染出现空白页问题

问题分析 #

页面空白的核心原因是组件渲染时抛出JavaScript错误，导致React无法正常渲染Chat组件：

1. messages初始值未定义：初始状态设为undefined，首次渲染时调用messages.map()会触发Cannot read properties of undefined (reading 'map')错误，直接导致组件崩溃。
2. 时间格式化函数未执行：toUTCString未加括号调用，会显示函数本身而非格式化后的时间字符串。
3. Room名称读取无空值保护：若roomId对应的Firebase文档不存在，snapshot.data()返回null，直接访问.name会触发错误。

修复后的Chat组件代码 #

import React, { useEffect, useState } from "react";
import "./Chat.css";
import { Avatar, IconButton } from "@material-ui/core";
import { SearchOutlined } from "@material-ui/icons";
import { AttachFile } from "@material-ui/icons";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import MicIcon from "@material-ui/icons/Mic";
import InsetEmoticonIcon from "@material-ui/icons/InsertEmoticon";
import { useParams } from "react-router-dom";
import db from "./firebase";

function Chat() {
  const [input, setInput] = useState("");
  const [photo, setphoto] = useState("");
  // 初始化messages为空数组，避免map调用报错
  const [messages, setMessages] = useState([]);
  const { roomId } = useParams();
  const [roomName, setRoomName] = useState();

  useEffect(() => {
    if (roomId) {
      console.log("Change");
      // 添加可选链保护，防止文档不存在时读取name报错
      db.collection("rooms")
        .doc(roomId)
        .onSnapshot((snapshot) => setRoomName(snapshot.data()?.name));
      db.collection("rooms")
        .doc(roomId)
        .collection("messages")
        .orderBy("timestamp", "asc")
        .onSnapshot((snapshot) =>
          setMessages(snapshot.docs.map((doc) => doc.data()))
        );
    }
  }, [roomId]);

  useEffect(() => {
    setphoto(Math.floor(Math.random() * 5000));
  }, []);

  const sendMessage = (e) => {
    e.preventDefault();
    console.log("You typed a message");
    // 补充：添加Firebase消息发送逻辑（需替换为实际登录用户名）
    // db.collection("rooms").doc(roomId).collection("messages").add({
    //   message: input,
    //   name: "当前登录用户名",
    //   timestamp: new Date()
    // })
    setInput("");
  };

  return (
    <div className="chat">
      <div className="chat-header">
        <Avatar
          src={`https://avatars.dicebear.com/api/pixel-art/${photo}.svg`}
        />
        <div className="chat-headerInfo">
          <h2>{roomName}</h2>
          <p>Last Seen</p>
        </div>
        <div className="chat-headerRight">
          <IconButton>
            <SearchOutlined />
          </IconButton>
          <IconButton>
            <AttachFile />
          </IconButton>
          <IconButton>
            <MoreVertIcon />
          </IconButton>
        </div>
      </div>
      <div className="chat-body">
        {messages.map((message, index) => (
          // 添加key属性，符合React列表渲染规范
          <p key={index} className="chat-message chatReceiver">
            <span className="sender">{message.name}</span>
            {message.message}
            <span className="timestamp">
              {/* 调用toUTCString()函数，同时增加空值判断 */}
              {message.timestamp?.toDate() ? new Date(message.timestamp.toDate()).toUTCString() : ""}
            </span>
          </p>
        ))}
      </div>
      <div className="chat-footer">
        <InsetEmoticonIcon />
        <form>
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            type="text"
            placeholder="Type a message"
          />
          <button onClick={sendMessage} type="submit">
            Send a message
          </button>
        </form>
        <MicIcon />
      </div>
    </div>
  );
}

export default Chat;

额外优化说明 #

• 给列表项添加key属性，避免React控制台警告。
• 时间格式化部分增加空值判断，防止timestamp字段不存在时触发错误。
• 注释了消息发送的Firebase逻辑，需补充当前登录用户信息后启用。

内容的提问来源于stack exchange，提问作者Adit Ramdas