Next.js+Firebase聊天功能：重复消息与性能优化咨询

基于Next.js框架，使用Firebase Firestore开发聊天功能时遇到的三类问题及解决方案如下：

相关代码 #

UserChatWrapper.tsx

const UserChatWrapper = ({ user, allMessages, sendMessageAction }: Props) => {
  const formRef = useRef<HTMLFormElement>(null);
  const chatsAutoScroll = useRef<HTMLDivElement>(null);
  const [message, setMessage] = useState("");
  const [error, setError] = useState<string>("");
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    allMessages.messages,
    (state: Message[], newMessage: Message) => [...state, newMessage]
  );
  return (
    <>
      <form
        ref={formRef}
        onSubmit={() => setMessage("")}
        action={async (e) => {
          if (!message) return;
          addOptimisticMessage({
            id: v4(),
            type: "text",
            deleted: false,
            sender: {
              username: user.displayName || "User",
              uid: user.uid,
            },
            recipient: "admin",
            content: { text: message },
            timeStamp: new Date(),
            edited: false,
            read_receipt: {
              delivery_status: "not_sent",
              status: false,
            },
          });
          setMessage("");
          if (chatsAutoScroll.current) {
            chatsAutoScroll.current.scrollTop =
              chatsAutoScroll.current.scrollHeight;
          }
          formRef?.current?.reset();
          sendMessageAction(e).then((res: { error: string }) => {
            if (res?.error) setError(res?.error);
          });
        }}
      ></form>
      {error && error}
    </>
  );
};
export default UserChatWrapper;

page.tsx

const UserChatWrapper = dynamic(
  () => import("@/components/chat/ChatWrapper"),
  { ssr: false }
);
type Props = {
  params: { chatId: string };
};
const UserChatScreen = ({ params }: Props) => {
  const [messages, setMessages] = useState<Conversation>();
  const user = Cookies.get("user") ? JSON.parse(Cookies.get("user")) : null;
  const router = useRouter();
  useEffect(() => {
    if (!user) redirect("/sell");
  });
  useEffect(() => {
    const unsubscribe = onSnapshot(
      doc(db, "Messages", params.chatId),
      (doc) => {
        if (!doc.exists()) router.push("/sell");
        setMessages(doc.data() as Conversation);
      }
    );
    return () => unsubscribe();
  }, [params.chatId, router]);
  const sendMessageAction = sendUserMessage.bind(
    null,
    { timeStamp: new Date() },
    params.chatId
  );
  return (
    <>
      {messages ? (
        <UserChatWrapper
          user={user}
          allMessages={messages}
          sendMessageAction={sendMessageAction}
        />
      ) : (
        <div className="text-center p-8">Please wait...</div>
      )}
    </>
  );
};
export default UserChatScreen;

1. 重复消息问题解决 #

重复显示是因为乐观更新的临时消息与Firestore同步回来的真实消息同时存在导致的，可通过唯一标识去重解决：

• 给乐观更新的临时消息添加特殊前缀ID，区分Firestore生成的真实ID
• 合并乐观消息与真实消息时，过滤掉已同步到真实列表中的临时消息

修改代码示例：

// UserChatWrapper.tsx 中修改乐观消息ID
addOptimisticMessage({
  id: `temp-${v4()}`, // 添加临时前缀
  // 其他字段保持不变
});

// 合并并去重消息列表
const mergedMessages = useMemo(() => {
  const realMessageIds = new Set(allMessages.messages.map(msg => msg.id));
  // 保留未同步的临时消息，再合并真实消息
  const filteredOptimistic = optimisticMessages.filter(msg => !realMessageIds.has(msg.id));
  return [...allMessages.messages, ...filteredOptimistic];
}, [allMessages.messages, optimisticMessages]);

同时修复form事件混用问题：form的onSubmit需要阻止默认提交行为，移除冗余的action属性：

<form
  ref={formRef}
  onSubmit={async (e) => {
    e.preventDefault(); // 阻止默认提交
    if (!message) return;
    // 后续乐观更新、发送逻辑
  }}
>

2. 性能优化方案 #

Firestore层面 #

• 限制监听数据量：避免监听整个会话文档，仅监听消息数组变化；历史消息采用分页加载（比如每次加载50条，滚动到底部再加载更早数据）
• 启用本地缓存：开启Firestore离线缓存，减少网络请求，离线时也能读取历史消息
• 分离高频状态：用Firebase Realtime Database处理「正在输入」这类高频状态，Firestore仅存储最终消息

React/Next.js层面 #

• 虚拟滚动：用react-window或react-virtualized实现虚拟滚动，仅渲染可见区域的消息，减少DOM节点数量
• 组件懒加载：保持dynamic加载ChatWrapper的做法，拆分MessageItem等小组件并懒加载
• 状态更新优化：用useMemo缓存消息列表，useCallback包裹回调函数，避免不必要的重渲染
• 输入防抖：对输入框的实时状态处理添加防抖，减少函数执行频率

3. 整体架构最佳实践 #

组件结构设计 #

• 分层拆分：
  • 容器组件：UserChatScreen负责数据监听、路由处理、用户状态校验
  • UI组件：拆分MessageItem、MessageInput等独立小组件，每个组件仅负责单一功能
• 封装自定义Hook：将Firestore的消息监听、发送逻辑封装成useChatMessages、useSendMessage，减少重复代码

状态管理 #

• 本地状态：用useState管理输入内容，useOptimistic处理乐观更新这类UI临时状态
• 全局状态：跨组件共享的会话选中状态、未读消息数等，用useContext+useReducer或轻量状态库（如Jotai）管理，避免props drilling
• 自动清理订阅：保持当前useEffect中取消Firestore快照订阅的逻辑，防止内存泄漏

其他规范 #

• 错误处理：给Firestore操作添加try/catch，发送失败时回滚乐观更新，给用户明确反馈
• 安全规则：在Firebase控制台严格设置Firestore安全规则，限制用户仅能读写自己参与的会话
• 消息状态同步：维护消息的「未发送/已发送/已读」状态，通过Firestore实时更新
• 离线支持：启用Firestore离线模式，离线时暂存消息，联网后自动同步

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