Flutter中如何读取Firebase Firestore集合的文档及字段？

核心问题说明 #

Firestore的CollectionReference.snapshots()返回的是持续监听集合变化的流，这个流不会进入ConnectionState.done状态——只要集合有数据更新，流就会持续推送新的快照，只有当流被手动取消订阅时才会结束。所以你原本想在done状态处理数据的逻辑不成立，应该在ConnectionState.active且快照有有效数据时处理。

另外原代码还有两处逻辑错误：

• 在ConnectionState.active分支里嵌套判断ConnectionState.done，这两个状态互斥，永远不会触发
• 尝试将docs.map((e)=>e.data())的结果强转为单个DocumentSnapshot，但map返回的是所有文档数据组成的可迭代对象，并非单个文档

修正后的代码 #

Widget build(BuildContext context) {
  final auth = Provider.of<AuthBase>(context, listen: false);
  return StreamBuilder<QuerySnapshot>(
    stream: auth.streamStateChanges(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      // 等待状态：显示加载组件
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }

      // 错误状态：处理异常
      if (snapshot.hasError) {
        return Center(child: Text('加载失败: ${snapshot.error}'));
      }

      // 活跃状态且有数据：处理集合文档列表
      if (snapshot.connectionState == ConnectionState.active && snapshot.hasData) {
        // 将所有文档数据转为List<Map<String, dynamic>>
        List<Map<String, dynamic>> userList = snapshot.data!.docs
            .map((doc) => doc.data() as Map<String, dynamic>)
            .toList();
        
        // 打印或使用数据
        print(userList.toString());
        
        // 这里可以返回展示数据的Widget，示例用ListView
        return ListView.builder(
          itemCount: userList.length,
          itemBuilder: (context, index) {
            final userData = userList[index];
            return ListTile(
              title: Text(userData['username'] ?? '未知用户'),
              subtitle: Text(userData['email'] ?? ''),
            );
          },
        );
      }

      // 默认返回空容器
      return Container();
    },
  );
}

补充说明 #

1. 如果你只需要一次性获取集合数据（无需实时监听），可以改用FutureBuilder配合get()方法，此时会触发ConnectionState.done：

// 替换StreamBuilder为FutureBuilder
return FutureBuilder<QuerySnapshot>(
  future: _database.get(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        List<Map<String, dynamic>> userList = snapshot.data!.docs
            .map((doc) => doc.data() as Map<String, dynamic>)
            .toList();
        print(userList);
      }
    }
    // 其他状态处理逻辑
    return Container();
  },
);

2. 你的streamStateChanges()方法无需修改：

final _database = FirebaseFirestore.instance.collection('userInfo');
Stream<QuerySnapshot> streamStateChanges() => _database.snapshots();

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