如何在Flutter StreamBuilder中访问Firebase Firestore子集合？

问题描述 #

通过StreamBuilder读取Firestore的items集合数据时，能正常获取文档的字段，但无法访问文档下的子集合，请问该如何处理？

当前代码 #

StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
        stream: CallApi().finalReference(reference: widget.finalReference),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text('snapshot Error:${snapshot.error}'));
          }
          if (snapshot.hasData) {
            var snapData = snapshot.data!.docs;
            if (kDebugMode) {
              print(snapData.length);
            }
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: ListView.builder(
                    itemCount: snapData.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ListItem(
                        mTitle: snapData[index].get('title') ?? '',
                        mSubTitle: snapData[index].get('address') ?? 'empty',
                        mPrice: snapData[index].get('price') ?? '',
                        mImageUrl: snapData[index].get('gallery')[0],
                        mOnTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => DetailsPage(
                                adsTitle: snapData[index].get('title'),
                                adsSubTitle: snapData[index].get('subTitle'),
                                gallery: snapData[index].get('gallery'),
                                specFTitle: snapData[index].get('gallery'),
                              ),
                            ),
                          );
                        },
                      );
                    },
                  ),
                ),
              ],
            );
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),

Firestore结构截图 #

解决方案 #

Firestore查询父集合时，不会自动返回子集合的数据，必须单独针对每个文档的子集合发起请求。以下是两种可行的实现方式：

1. 在列表项中嵌套StreamBuilder实时监听子集合 #

针对每个items文档，在对应的ListItem组件里嵌套一个StreamBuilder，专门监听该文档下的子集合（比如截图中的specs）：

// 修改ListItem组件，添加子集合监听逻辑
class ListItem extends StatelessWidget {
  final String mTitle;
  final String mSubTitle;
  final String mPrice;
  final String mImageUrl;
  final VoidCallback mOnTap;
  final DocumentSnapshot<Map<String, dynamic>> parentDoc; // 新增父文档快照参数

  const ListItem({
    Key? key,
    required this.mTitle,
    required this.mSubTitle,
    required this.mPrice,
    required this.mImageUrl,
    required this.mOnTap,
    required this.parentDoc,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: mOnTap,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 原有UI展示部分
          Text(mTitle),
          Text(mSubTitle),
          Text(mPrice),
          Image.network(mImageUrl),
          // 嵌套StreamBuilder加载子集合数据
          StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
            stream: parentDoc.reference.collection('specs').snapshots(),
            builder: (context, subSnapshot) {
              if (subSnapshot.hasError) return Text('子集合加载失败');
              if (!subSnapshot.hasData) return const SizedBox(height: 20, child: CircularProgressIndicator());
              
              var subDocs = subSnapshot.data!.docs;
              return Column(
                children: subDocs.map((doc) {
                  return Text('${doc.get('title')}: ${doc.get('value')}');
                }).toList(),
              );
            },
          ),
        ],
      ),
    );
  }
}

然后在父组件的ListView.builder中传递父文档快照：

return ListItem(
  mTitle: snapData[index].get('title') ?? '',
  mSubTitle: snapData[index].get('address') ?? 'empty',
  mPrice: snapData[index].get('price') ?? '',
  mImageUrl: snapData[index].get('gallery')[0],
  mOnTap: () { /* 原有跳转逻辑 */ },
  parentDoc: snapData[index], // 传递当前文档快照
);

2. 批量预加载所有子集合数据 #

如果不需要实时更新，可在父StreamBuilder中通过Future.wait批量获取所有文档的子集合数据：

// 修改父StreamBuilder的处理逻辑
if (snapshot.hasData) {
  var snapData = snapshot.data!.docs;
  // 批量获取每个文档的子集合数据
  return FutureBuilder<List<List<QueryDocumentSnapshot<Map<String, dynamic>>>>>(
    future: Future.wait(
      snapData.map((doc) => doc.reference.collection('specs').get().then((snap) => snap.docs)),
    ),
    builder: (context, subSnapshots) {
      if (subSnapshots.hasError) return Center(child: Text('子集合加载失败'));
      if (!subSnapshots.hasData) return const Center(child: CircularProgressIndicator());
      
      var allSubData = subSnapshots.data!;
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: snapData.length,
              itemBuilder: (context, index) {
                var currentSubDocs = allSubData[index];
                return ListItem(
                  mTitle: snapData[index].get('title') ?? '',
                  mSubTitle: snapData[index].get('address') ?? 'empty',
                  mPrice: snapData[index].get('price') ?? '',
                  mImageUrl: snapData[index].get('gallery')[0],
                  mOnTap: () { /* 原有跳转逻辑 */ },
                  // 可将currentSubDocs传递给ListItem展示
                );
              },
            ),
          ),
        ],
      );
    },
  );
}

注意事项 #

• Firestore的子集合是独立存储的资源，查询父文档不会自动包含子集合数据，必须单独发起查询请求。
• 嵌套StreamBuilder适合需要实时同步子集合数据的场景；批量预加载适合一次性获取数据的场景，注意控制父集合的文档数量，避免性能问题。

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