Firebase Real-time database结合Gifted Chat多次重复渲染问题如何解决

问题根因 #

你的代码出现消息重复有两个核心原因：

1. 发送消息时onSend方法先手动调用setMessages把新消息追加到本地状态，随后Firebase实时数据库的value监听器触发，返回全量消息列表，你又将全量消息逐条追加到已有状态中，相当于把旧消息+新消息又叠加了一遍，自然出现重复。
2. value事件每次触发都会返回指定节点下的全量数据，不需要将拿到的消息逐条追加到已有状态，直接全量替换状态即可。

修复方案 #

• 第一步：修改数据库监听器逻辑，拿到全量消息后直接替换状态，而非逐条追加。可按createdAt字段排序适配Gifted Chat的展示顺序。
• 第二步：删除onSend方法里手动调用setMessages的逻辑，所有消息状态统一由数据库监听器同步更新，避免两边重复添加。如果需要实现发送消息立刻展示的乐观UI，可在追加前判断消息_id是否已经存在，不存在再追加。

修正后代码

useLayoutEffect(() => {
    getUser();
    // 实时更新监听
    const unsubscribe = database()
      .ref('100-101/')
      .on('value', snapshot => {
        const allMessages = [];
        snapshot.forEach(doc => {
          allMessages.push({
            _id: doc.val()._id,
            createdAt: doc.val().createdAt,
            text: doc.val().message,
            user: user,
          });
        });
        // 按创建时间倒序排序适配Gifted Chat展示逻辑
        allMessages.sort((a, b) => b.createdAt - a.createdAt);
        // 直接替换全量消息，不做追加
        setMessages(allMessages);
      });
    return () => unsubscribe();
  }, [user]); // 把user加入依赖数组，避免user异步获取时赋值错误

const onSend = useCallback((msgs = []) => {
  const time = new Date().getTime();
  for (let i = 0; i < msgs.length; i++) {
    database().ref('100-101/').push({
      _id: msgs[i]._id,
      message: msgs[i].text,
      user: msgs[i].user.uid,
      createdAt: time,
    });
  }
}, []);

可选优化 #

如果聊天消息量很大，每次拉全量数据性能较低，可以将value事件改为child_added事件，初始加载时拉取历史消息，后续只监听新增的消息，追加时根据_id去重即可，性能更好。

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