Firestore消息存储后无法展示及输入框未清空问题求助

消息无法在屏幕展示的原因及修复 #

你代码里的StreamBuilder监听的Firestore路径和发送消息的路径不一致：

• 发送消息时，写入的是chatrooms/chatrooms/message集合
• 但StreamBuilder里用了firestore.collection('chatrooms').doc().collection('message')，这里的doc()会生成随机的文档ID，导致监听的是一个完全不同的空集合，所以看不到消息。

修复：把StreamBuilder中的doc()改为doc('chatrooms')，和写入路径统一：

stream: firestore
    .collection('chatrooms')
    .doc('chatrooms') // 改为固定ID，和发送时的路径一致
    .collection('message')
    .snapshots(),

TextField内容不清空的修复 #

点击发送按钮后，没有清空输入控制器的内容，所以文本会保留在输入框里。需要在发送消息的操作完成后，调用_text.clear()：

修改发送按钮的onTap方法：

onTap: () {
  if (_text.text.trim().isNotEmpty) { // 增加空内容判断，避免发送空消息
    firestore
        .collection('chatrooms')
        .doc('chatrooms')
        .collection('message')
        .add({
      'sender': auth.currentUser!.email,
      'time': DateFormat('hh:mm').format(DateTime.now()),
      'msg': _text.text,
    }).then((_) {
      _text.clear(); // 消息发送成功后清空输入框
    });
  }
},

额外优化建议 #

可以给message集合添加按时间排序的规则，让消息按发送时间顺序展示，在StreamBuilder中加上orderBy('time')：

stream: firestore
    .collection('chatrooms')
    .doc('chatrooms')
    .collection('message')
    .orderBy('time') // 按时间排序
    .snapshots(),

注意：添加orderBy后需要在Firestore控制台创建对应的索引，控制台的错误提示里会有创建索引的链接，直接点击创建即可。

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