Flutter中Firebase如何同时获取Firestore两个集合的数据

问题根源 #

你的代码出现这个现象的核心错误有三个：

• 你定义的productPrice是StreamBuilder组件实例，不是实际查询到的价格数值
• 你没有把这个StreamBuilder放入Flutter的组件渲染树中执行数据监听和构建逻辑，反而直接在Text组件里通过字符串插值把组件对象转成字符串输出，界面自然只会打印StreamBuilder的类型名称，不会显示真实价格
• 两层嵌套的StreamBuilder都用了snapshot作为builder方法的参数名，存在作用域冲突风险，很容易导致数据读取错位

修正方法 #

不要把StreamBuilder当普通值做字符串插值，直接把它作为渲染组件放到Column的子组件列表中，同时重命名内层builder的快照参数避免命名冲突，额外补充空数据判断防止运行时报错。
修正后的完整可运行代码如下：

Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot> (
        stream: _firestore
            .collection('customers')
            .doc(user!.uid)
            .collection('cart')
            .snapshots(),
        builder: (context, cartSnapshot){
          if(cartSnapshot.hasData){
            final cart = cartSnapshot.data!.docs;
            List<Column> cartWidgets = [];
            for (var product in cart) {
              final productCount = product['count'];
              final productID = product['id'];

              final productWidget = Column(
                  children: [
                    Text('Quantity: $productCount'),
                    Text('ProductID: $productID'),
                    // 直接将StreamBuilder作为子组件放入渲染树
                    StreamBuilder<QuerySnapshot>(
                      stream: _firestore.collection('product')
                              .where('id', isEqualTo: productID)
                              .snapshots(),
                        builder: (context, productSnapshot) {
                        // 加载状态
                        if(!productSnapshot.hasData){
                          return Text('Loading price...');
                        }
                        final products = productSnapshot.data!.docs;
                        // 查无对应商品的边界判断
                        if(products.isEmpty){
                          return Text('No price data');
                        }
                        final priceValue = products.first['price'];
                        return Text('Price: ${priceValue.toString()}');
                      }
                    ),
                    SizedBox(height: 50,)
                  ]
              );
              cartWidgets.add(productWidget);
            }
            return SingleChildScrollView(
              child: SafeArea(
                child: Column(
                  children: cartWidgets,
                ),
              ),
            );
          } else{
            return const Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.lightBlueAccent,
              ),
            );
          }
        }
    );
  }

优化提示 #

当前嵌套StreamBuilder的实现，会在购物车数据每次更新时，重新发起所有商品的价格查询请求，购物车商品较多时会产生大量冗余请求、性能较差。后续可以考虑两种优化方向：

• 提前一次性批量查询购物车内所有ID对应的商品数据，再统一渲染
• 使用RxDart的流合并方法，将购物车流和商品流合并后统一输出渲染数据，减少重复监听和请求。

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