Firebase聊天室收发消息时原有消息消失，如何实现消息堆叠留存

核心问题点 #

• 实时快照更新时直接覆盖全量消息列表：你当前的逻辑中，每次useCollection返回的快照更新时，都会执行setMessagesList(messages)直接用最新拉取的25条消息替换整个列表，之前通过getMoreMessages加载的历史消息会直接被清空，新消息触发快照更新时也会清除已加载的历史内容。
• 每次快照更新都会覆盖startAt参数：会导致后续加载更多历史消息的起点错误，出现重复拉取或者内容缺失的问题。
• getMoreMessages中的列表更新存在闭包陷阱：直接使用[...messagesList, ...messages]拼接，若存在闭包缓存的旧messagesList，会导致拼接内容错误。

修复代码 #

const messageLimit = 25;
const [messagesSnapshot] = useCollection(
  db
    .collection('chats')
    .doc(id)
    ?.collection('messages')
    .orderBy('timestamp', 'desc')
    .limit(messageLimit),
);

if (messagesSnapshot) {
  const snap = messagesSnapshot.docs;
  // 处理最新的25条快照消息
  const newLatestMessages = snap.map(message => ({
    id: message.id,
    user: message.data().user,
    messageInfo: {
      ...message.data(),
      timestamp: message.data().timestamp?.toDate().getTime(),
    },
  }));

  // 用ID去重合并，兼容消息修改、删除场景
  const msgMap = new Map(messagesList.map(msg => [msg.id, msg]));
  newLatestMessages.forEach(msg => msgMap.set(msg.id, msg));
  // 按时间倒序排序保证消息顺序正确
  const mergedMessages = Array.from(msgMap.values())
    .sort((a, b) => b.messageInfo.timestamp - a.messageInfo.timestamp);
  setMessagesList(mergedMessages);

  // 仅初始加载时设置分页起点，避免后续快照更新覆盖
  if (!startAt) {
    const startPost = messagesSnapshot.docs[messagesSnapshot.docs.length - 1];
    setStartAt(startPost);
  }
}

const getMoreMessages = async () => {
  if (!lastPost) {
    setIsGetMessagesLoading(true);
    const query = await db
      .collection('chats')
      .doc(id)
      .collection('messages')
      .orderBy('timestamp', 'desc')
      .startAfter(startAt)
      .limit(messageLimit)
      .get();
    const messages = query.docs.map(message => ({
      id: message.id,
      user: message.data().user,
      messageInfo: {
        ...message.data(),
        timestamp: message.data().timestamp?.toDate().getTime(),
      },
    }));
    setStartAt(query.docs[query.docs.length - 1]);
    // 使用函数式更新避免闭包问题
    setMessagesList(prev => [...prev, ...messages]);
    setIsGetMessagesLoading(false);
    messages.length === 0 ? setLastPost(true) : setLastPost(false);
  }
};

useEffect(() => {
  showMessages();
}, [messagesSnapshot]);

额外说明 #

如果不需要处理消息修改、删除的场景，也可以用时间戳过滤的方式做合并，性能更高：

1. 取最新25条消息中最早的那条的时间戳
2. 从现有消息列表中过滤出时间小于该值的历史消息
3. 直接拼接[...newLatestMessages, ...oldHistoryMessages]即可

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