Firestore新增数据无法实时展示，需刷新页面才可见

你的问题核心在于使用了Firestore的get()方法单次获取数据，而非实时监听数据变化。以下是具体修改方案：

1. 替换列表外层的FutureBuilder为StreamBuilder #

直接监听gameinfo集合的实时快照，无需单独的getGamesId方法：

StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance.collection('gameinfo').snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return const Center(child: CircularProgressIndicator());
    }
    final docs = snapshot.data!.docs;
    return ListView.builder(
      itemCount: docs.length,
      itemBuilder: (context, index) {
        final docId = docs[index].id;
        return Container(
          height: 300,
          child: GetGamesInfo(documentId: docId),
        );
      },
    );
  },
)

2. 修改GetGamesInfo组件为实时监听单个文档 #

将原来的FutureBuilder替换为StreamBuilder，监听单个文档的变化：

final String documentId;

const GetGamesInfo({required this.documentId});

@override
Widget build(BuildContext context) {
  return StreamBuilder<DocumentSnapshot>(
    stream: FirebaseFirestore.instance.collection('gameinfo').doc(documentId).snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return const Text('');
      }
      Map<String, dynamic> data = snapshot.data!.data() as Map<String, dynamic>;
      return Center(child: Text('${data['selectedGame']}'));
    },
  );
}

原理说明 #

• get()方法仅在调用时执行一次数据请求，后续集合/文档的变化不会触发UI更新；
• snapshots()方法会返回一个持续的数据流，当Firestore中的数据发生新增、修改或删除时，会自动推送最新的快照，StreamBuilder会根据新快照重建UI，实现实时更新效果。

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