Flutter中FirebaseList重复显示数据问题排查求助

问题现象 #

在基于Firebase Realtime Database实现聊天功能时，遇到以下异常：

• 页面首次打开，控制台打印chatMessages已有数据，但界面无消息显示
• 热重载后，数据库中仅有的一条消息重复显示两次
• 发送新消息时，会拉取数据库所有消息而非仅新增内容

数据库结构 #

{
    "chatMessageOne": {...}
}

当前代码实现 #

List<ChatMessage> chatMessages = [];

@override
void initState() {
  // dbRef = dbInstance.ref("/events/${widget.event.event.eventId}");
  dbRef = dbInstance.ref("/events/");
  var query = dbRef!.child(widget.event.event.eventId);
  FirebaseList(
    query: query,
    onChildAdded: (index, snapshot) {
      Map<dynamic, dynamic> childMap = snapshot.value as dynamic;
      ChatMessage newChatMessage = ChatMessage(
        chatMessageId: snapshot.key.toString(),
        userId: childMap["userId"],
        displayName: childMap["displayName"],
        message: childMap["message"],
        datetime: childMap["datetime"],
      );

      chatMessages.add(newChatMessage);
      print("onChildAdded:chatMessages: $chatMessages"); // prints [Instance of 'ChatMessage']
    },
    onValue: (snapshot) {
      for (var child in snapshot.children) {
        Map<dynamic, dynamic> childMap = child.value as dynamic;
        ChatMessage newChatMessage = ChatMessage(
          chatMessageId: child.key.toString(),
          userId: childMap["userId"],
          displayName: childMap["displayName"],
          message: childMap["message"],
          datetime: childMap["datetime"],
        );

        chatMessages.add(newChatMessage);
      }
      print("onValue:chatMessages: $chatMessages"); // prints [Instance of 'ChatMessage', Instance of 'ChatMessage']
    },
  );

  _messageFieldController = TextEditingController();
  super.initState();
}

问题根源 #

1. UI不更新：修改chatMessages后未调用setState()，Flutter无法感知状态变化，不会触发界面重建
2. 消息重复：onValue与onChildAdded会同时触发，首次加载时onValue遍历所有子节点添加消息，onChildAdded又逐个添加一次；热重载时initState再次执行，旧列表未清空导致重复追加数据
3. 全量拉取新消息：onValue事件会在任意数据变化时触发，每次都会遍历所有子节点重新添加，而非仅处理新增内容

修复方案 #

方案1：直接使用FirebaseList内置渲染能力 #

FirebaseList本身是Widget，可直接在build方法中使用，无需手动维护列表：

@override
Widget build(BuildContext context) {
  var query = dbInstance.ref("/events/${widget.event.event.eventId}");
  
  return FirebaseList(
    query: query,
    itemBuilder: (context, index, snapshot) {
      Map<dynamic, dynamic> childMap = snapshot.value as dynamic;
      ChatMessage message = ChatMessage(
        chatMessageId: snapshot.key.toString(),
        userId: childMap["userId"],
        displayName: childMap["displayName"],
        message: childMap["message"],
        datetime: childMap["datetime"],
      );
      return ChatMessageItem(message: message); // 替换为你的消息条目组件
    },
  );
}

方案2：手动维护列表的修正版 #

如果需要手动管理chatMessages，需调整以下逻辑：

List<ChatMessage> chatMessages = [];
FirebaseList? _firebaseList; // 保存实例避免内存泄漏

@override
void initState() {
  super.initState();
  _messageFieldController = TextEditingController();
  
  var query = dbInstance.ref("/events/${widget.event.event.eventId}");
  _firebaseList = FirebaseList(
    query: query,
    onChildAdded: (index, snapshot) {
      Map<dynamic, dynamic> childMap = snapshot.value as dynamic;
      ChatMessage newChatMessage = ChatMessage(
        chatMessageId: snapshot.key.toString(),
        userId: childMap["userId"],
        displayName: childMap["displayName"],
        message: childMap["message"],
        datetime: childMap["datetime"],
      );
      
      setState(() {
        chatMessages.insert(index, newChatMessage); // 按索引插入保证顺序
      });
    },
    // 可选：处理消息修改与删除
    onChildChanged: (index, snapshot) {
      Map<dynamic, dynamic> childMap = snapshot.value as dynamic;
      ChatMessage updatedMessage = ChatMessage(
        chatMessageId: snapshot.key.toString(),
        userId: childMap["userId"],
        displayName: childMap["displayName"],
        message: childMap["message"],
        datetime: childMap["datetime"],
      );
      
      setState(() {
        chatMessages[index] = updatedMessage;
      });
    },
    onChildRemoved: (index, snapshot) {
      setState(() {
        chatMessages.removeAt(index);
      });
    },
  );
}

@override
void dispose() {
  _firebaseList?.dispose(); // 销毁实例防止内存泄漏
  _messageFieldController.dispose();
  super.dispose();
}

核心注意点 #

• 移除onValue回调，避免与onChildAdded重复处理数据
• 修改列表后必须调用setState()通知Flutter更新UI
• 保存FirebaseList实例并在dispose中销毁，防止内存泄漏
• 初始化时避免重复创建FirebaseList实例，防止多次监听数据库

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