React+TypeScript中Firestore Web V9实时消息列表更新异常求助

你的问题出在useEffect闭包捕获的messagelist是初始空数组，每次触发onSnapshot时，调用setMessagelist([...messagelist, ...messagesHolder])都是基于这个空数组拼接新变更内容，导致之前的消息被覆盖。

解决方法是使用函数式更新获取最新状态，而非依赖闭包里的旧状态：

修改onSnapshot内的状态更新代码：

setMessagelist(prevMessages => [...prevMessages, ...messagesHolder]);

完整调整后的useEffect代码：

useEffect(() => {
  const q = query(messagesRef, limit(25));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const messagesHolder: DocumentData[] = [];
    querySnapshot.docChanges().forEach((doc) => {
      console.log('changes'); 
      // 仅处理新增消息，避免修改旧消息时重复添加
      if (doc.type === 'added') {
        messagesHolder.push(doc.doc.data());
      }
      // 若需处理消息修改/删除，可补充对应逻辑
      // else if (doc.type === 'modified') { /* 找到对应消息并更新 */ }
      // else if (doc.type === 'removed') { /* 找到对应消息并删除 */ }
    });
    // 函数式更新确保拿到最新的状态值
    setMessagelist(prevMessages => [...prevMessages, ...messagesHolder]);
  });

  return () => {
    console.log('unsub');
    unsubscribe();
  };
}, []);

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