Flutter中FutureBuilder无法识别snapshot.hasData及Firebase结果列表渲染问题

问题根因 #

你的getProducts方法未显式返回查询结果，内部then回调里的返回值仅作用于回调本身，没有被外层方法返回，最终整个方法默认返回null，这就是FutureBuilder一直无法触发hasData分支的核心原因。

代码修复方案 #

有两种等价的修复方式，推荐使用第二种写法，逻辑更清晰，避免嵌套回调：

方式1：直接返回Future对象 #

Future<List<QueryDocumentSnapshot>?> getProducts(String vendorId) {
  return vendorsInfoColl.doc(vendorId)
    .collection("products")
    .get()
    .then((QuerySnapshot querySnapShot) {
      if (querySnapShot.docs.isNotEmpty){
        print('not empty');
        print(querySnapShot.docs);
        return querySnapShot.docs;
      } else {
        print('snapshot empty');
        return null;
      }
    });
}

方式2：使用await替代then回调 #

Future<List<QueryDocumentSnapshot>?> getProducts(String vendorId) async {
  final querySnapShot = await vendorsInfoColl.doc(vendorId).collection("products").get();
  if (querySnapShot.docs.isNotEmpty) {
    print('not empty');
    print(querySnapShot.docs);
    return querySnapShot.docs;
  } else {
    print('snapshot empty');
    return null;
  }
}

列表渲染实现建议 #

修复数据获取逻辑后，调整FutureBuilder的实现即可正常渲染列表，注意AlertDialog嵌套ListView需要加shrinkWrap: true避免布局溢出，同时可以增加字段校验避免崩溃，修正后的组件代码如下：

Widget build(BuildContext context) {
  return AlertDialog(
    title: Text(vendorTitle.toString()),
    content: FutureBuilder<List<QueryDocumentSnapshot>?>(
      future: VendorDatabase().getProducts(widget.vendorId),
      builder: (BuildContext context, AsyncSnapshot<List<QueryDocumentSnapshot>?> snapshot) {
        print(snapshot.connectionState);
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        } else if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return const Text('加载出错');
          } else if (snapshot.hasData && snapshot.data != null) {
            final productDocs = snapshot.data!;
            print('拿到商品数据条数: ${productDocs.length}');
            return ListView.builder(
              shrinkWrap: true, // 必须加，适配AlertDialog的高度限制
              itemCount: productDocs.length,
              itemBuilder: (context, index) {
                final productDoc = productDocs[index];
                // 按实际字段名取对应值，增加默认值避免空值报错
                final productName = productDoc.get('products') as String? ?? '未命名商品';
                return ListTile(
                  title: Text(productName),
                  // 可按需添加副标题、点击事件等逻辑
                );
              }
            );
          } else {
            return const Text('暂无商品数据');
          }
        } else {
          return Text('加载状态: ${snapshot.connectionState}');
        }
      }
    )
  );
}

额外优化建议：如果业务逻辑复杂，可以将Firebase返回的文档转换为自定义实体类，后续使用更安全，示例如下：

class Product {
  final String docId;
  final String name;
  // 补充其他商品字段
  Product.fromDoc(QueryDocumentSnapshot doc):
    docId = doc.id,
    name = doc.get('name') as String? ?? '';
}

转换后可以在getProducts方法中直接返回List<Product>类型的结果，后续无需再做类型校验。

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