Flutter读取Firestore数据StreamBuilder无数据展示问题修复

使用Flutter框架开发移动端应用时，需求为读取Firebase旗下Firestore数据库的指定数据并在应用内展示。已在Firestore的customers集合中存入有效数据，但运行代码时snapshot.hasData判断分支始终返回'No Data'提示，无法正常加载展示数据。

页面层StreamBuilder实现代码 #

StreamBuilder<QuerySnapshot>(
              stream: FirebaseFirestore.instance
                  .collection('customers')
                  .snapshots(),
              builder: (
                BuildContext context,
                AsyncSnapshot<QuerySnapshot> snapshot,
              ) {
                if (snapshot.hasData) {
                  var data = 'No Data';
                  return Text(data);
                }
                if (snapshot.connectionState == ConnectionState.waiting) {
                  var data = 'Loading';
                  return Text(data);
                }
                final data = snapshot.requireData;
                return ListView.builder(
                    itemCount: data.size,
                    itemBuilder: (context, index) {
                      return Container(
                        child: Column(
                          children: [
                            detailsWidget(
                              icon: Icons.person,
                              field: 'Name',
                              value: '${data.docs[index]['name']}',
                            ),
                            detailsWidget(
                              icon: Icons.order,
                              field: 'Order',
                              value: '${data.docs[index]['order']}',
                            ),
           
                          ],
                        ),
                      );
                    });
              }),

独立封装的数据库操作类代码 #

import 'package:cloud_firestore/cloud_firestore.dart';
class DatabaseManagement {


 final CollectionReference customerList =
  FirebaseFirestore.instance.collection('customers');
 Future<void> createUserData(
String name,
String order,
String uid,
  ) async {
return await customerList.doc(uid).set({
  'name': name,
  'order': order
});


 }

}

1. StreamBuilder状态判断逻辑完全写反：代码中只要snapshot.hasData为true（即已经成功拿到数据返回），就直接返回写死的'No Data'文本，永远不会走到后续渲染列表的逻辑分支。
2. 缺少错误状态处理：Firestore请求出错（如权限不足、网络异常）时没有对应提示，无法快速定位问题。
3. 存在隐藏运行时错误：代码中使用的Icons.order不是Flutter Material库内置的合法图标，运行到列表渲染逻辑时会抛出图标找不到的异常。

• 调整StreamBuilder的状态判断顺序：优先处理加载等待状态、请求错误状态，再判断数据是否为空，最后处理数据正常的列表渲染逻辑
• 修正条件分支判断：只有当数据不存在、或者返回的文档列表为空时，才展示'No Data'提示
• 替换不存在的Icons.order为Material库内置的合法图标，可根据业务场景选择Icons.receipt_long、Icons.shopping_bag等和订单语义匹配的图标
• 补充错误分支提示，出现请求异常时直接展示错误信息方便排查
• 若修正代码后仍无法读取数据，检查Firestore安全规则配置，本地调试阶段可临时开放测试读写权限，上线前需按业务需求收紧规则。

StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance
      .collection('customers')
      .snapshots(),
  builder: (
    BuildContext context,
    AsyncSnapshot<QuerySnapshot> snapshot,
  ) {
    // 加载等待状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Text('Loading');
    }
    // 请求错误状态
    if (snapshot.hasError) {
      return Text('加载出错: ${snapshot.error.toString()}');
    }
    // 数据为空状态
    if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
      return const Text('No Data');
    }
    // 数据正常，渲染列表
    final data = snapshot.data!;
    return ListView.builder(
      itemCount: data.size,
      itemBuilder: (context, index) {
        return Container(
          child: Column(
            children: [
              detailsWidget(
                icon: Icons.person,
                field: 'Name',
                value: '${data.docs[index]['name']}',
              ),
              detailsWidget(
                icon: Icons.receipt_long,
                field: 'Order',
                value: '${data.docs[index]['order']}',
              ),
            ],
          ),
        );
      },
    );
  },
)

数据库操作类代码逻辑无问题，无需修改。

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