从Firebase取数正常但刷新后渲染失败，报map不是函数错误

核心原因 #

刷新页面后，messages的初始值并非数组（可能是undefined、null，或是Firebase返回的键值对对象），而map方法仅能在数组类型上调用，非数组类型调用就会触发该错误。

解决办法 #

• 设置数组类型的初始值
  在组件初始化时，将messages的默认值设为空数组，保证即使Firebase数据还未加载完成，也能正常调用map：

  const [messages, setMessages] = useState([]);
  

• 转换Firebase返回的数据格式
  若从Firebase获取的是键值对对象（比如通过snapshot.val()得到的结果），需要先将其转换为数组：

  const messagesObj = snapshot.val();
  // 若对象存在则提取值转为数组，否则设为空数组
  const messagesArray = messagesObj ? Object.values(messagesObj) : [];
  setMessages(messagesArray);
  

• 添加渲染边界判断
  在渲染前先确认messages是数组类型，同时给map生成的元素添加唯一key属性（React要求）：

  <div className="chat__body">
    {Array.isArray(messages) && messages.map((message) => (
      <p 
        className={`chat__message ${true && "chat__reciever"}`}
        key={message.id || message.timestamp?.toDate().getTime()}
      >
        <span className="chat__name">{message.name}</span>
        {message.message}
        <span className="chat__timestamp">
          {message.timestamp ? new Date(message.timestamp.toDate()).toUTCString() : ''}
        </span>
      </p>
    ))}
  </div>
  

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