Firestore多集合数据展示报错及高效实现方案咨询

我尝试从Firestore的两个集合（menu和users）中展示数据，嵌套了两个StreamBuilder组件想合并数据流，但一直遇到错误：bad state field doesnt exist with doc snapshot。请问怎么修复这个错误？有没有更高效的方法在同一个类里展示两个不同集合的数据？

待展示数据截图 #

相关代码 #

class OrderStream extends StatelessWidget {
  static const String route = "\/Order";

  final CollectionReference meal =
      FirebaseFirestore.instance.collection("menu");
  final CollectionReference profile =
      FirebaseFirestore.instance.collection("users");

  OrderStream({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: StreamBuilder(
            stream: profile.snapshots(),
            builder: (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
              return StreamBuilder(
                stream: meal.snapshots(),
                builder:
                    (context, AsyncSnapshot<QuerySnapshot> streamSnapshot) {
                  if (!streamSnapshot.hasData) {
                    return const SizedBox(
                      height: 250,
                      child: Center(
                        child: CircularProgressIndicator(),
                      ),
                    );
                  } else {
                    return ListView.builder(
                        itemCount: streamSnapshot.data!.docs.length,
                        itemBuilder: (context, index) {
                          final DocumentSnapshot documentSnapshot =
                              streamSnapshot.data!.docs[index];
                          return Column(
                             children: [
                            Text( documentSnapshot['price'],)
                            Text( documentSnapshot['name'],)
                          ]
                          ),
                        },
                      );
                  }
                },
              );
            },
          ),
    );
  }
}

错误修复与优化方案 #

一、先修复当前报错 #

你遇到的bad state field doesnt exist错误，核心原因有两个：

1. 变量名冲突：嵌套的两个StreamBuilder都用了streamSnapshot作为快照变量名，内层变量会覆盖外层，导致你只能拿到menu集合的数据；如果代码中误访问了users集合没有的字段，就会触发报错。
2. 字段不存在或名称错误：检查menu集合的文档是否真的包含price和name字段，Firestore字段名区分大小写，注意拼写是否一致。

修复代码示例

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: StreamBuilder(
      stream: profile.snapshots(),
      // 给外层快照重命名，避免冲突
      builder: (context, AsyncSnapshot<QuerySnapshot> profileSnapshot) {
        return StreamBuilder(
          stream: meal.snapshots(),
          // 给内层快照重命名
          builder: (context, AsyncSnapshot<QuerySnapshot> mealSnapshot) {
            // 同时检查两个流是否都有数据
            if (!profileSnapshot.hasData || !mealSnapshot.hasData) {
              return const Center(child: CircularProgressIndicator());
            }
            
            return ListView.builder(
              itemCount: mealSnapshot.data!.docs.length,
              itemBuilder: (context, index) {
                final mealDoc = mealSnapshot.data!.docs[index];
                // 先判断字段是否存在，避免报错
                final price = mealDoc.data().containsKey('price') 
                    ? mealDoc['price'].toString() 
                    : '无价格';
                final name = mealDoc.data().containsKey('name') 
                    ? mealDoc['name'] 
                    : '无名称';
                
                return Column(
                  children: [
                    Text(price),
                    Text(name),
                  ],
                );
              },
            );
          },
        );
      },
    ),
  );
}

二、更高效的多集合数据流处理方案 #

嵌套StreamBuilder会导致代码冗余、可读性差，推荐以下两种更优方案：

1. 使用StreamZip合并两个流（实时监听场景）

借助rxdart库的StreamZip，将两个集合的数据流合并为一个，只需一个StreamBuilder：

• 先在pubspec.yaml添加依赖：

dependencies:
  rxdart: ^0.27.7

• 实现代码：

import 'package:rxdart/rxdart.dart';

// 合并两个集合的数据流
Stream<List<QuerySnapshot>> get mergedStream {
  return StreamZip([profile.snapshots(), meal.snapshots()]);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: StreamBuilder<List<QuerySnapshot>>(
      stream: mergedStream,
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const Center(child: CircularProgressIndicator());
        }
        // 分别获取两个集合的数据
        final profileData = snapshot.data![0];
        final mealData = snapshot.data![1];
        
        return Column(
          children: [
            // 展示users集合数据
            const Text("用户列表："),
            Expanded(
              child: ListView.builder(
                itemCount: profileData.docs.length,
                itemBuilder: (context, index) {
                  final doc = profileData.docs[index];
                  return Text(doc['name'] ?? '未知用户');
                },
              ),
            ),
            // 展示menu集合数据
            const Text("菜单列表："),
            Expanded(
              child: ListView.builder(
                itemCount: mealData.docs.length,
                itemBuilder: (context, index) {
                  final doc = mealData.docs[index];
                  return Column(
                    children: [
                      Text(doc['name'] ?? '未知菜品'),
                      Text(doc['price'] ?? '0'),
                    ],
                  );
                },
              ),
            ),
          ],
        );
      },
    ),
  );
}

2. 使用Future.wait（非实时场景）

如果不需要实时更新数据，只是一次性获取两个集合的数据，可以用Future.wait替代StreamBuilder：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder(
      future: Future.wait([profile.get(), meal.get()]),
      builder: (context, AsyncSnapshot<List<QuerySnapshot>> snapshot) {
        if (!snapshot.hasData) {
          return const Center(child: CircularProgressIndicator());
        }
        final profileData = snapshot.data![0];
        final mealData = snapshot.data![1];
        
        // 按需处理并展示两个集合的数据
        return Column(
          children: [
            // 展示用户数据
            // 展示菜单数据
          ],
        );
      },
    ),
  );
}

额外注意事项 #

• 访问Firestore字段前，一定要用doc.data().containsKey('字段名')判断字段是否存在，避免触发不存在错误。
• 如果两个集合的数据存在关联（比如菜单属于某个用户），可优化Firestore数据结构，比如使用子集合或引用字段，减少多集合查询的复杂度。

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