使用StreamBuilder查询Firebase实时数据库列表报错求助

架构老林

2026-8-5

解决StreamBuilder展示Firebase实时数据库列表的问题

原代码存在的问题

在itemBuilder中重复解析整个数据库快照，造成不必要的性能损耗
未处理快照为空、数据为空或出现错误的场景，容易触发空指针异常
通过map.values.toList()获取的数据顺序，可能与Firebase数据库中children的实际顺序不匹配

修正后的代码

DatabaseReference starCountRef = FirebaseDatabase.instance.ref('/Shop/qw1234/Inventory/');

Expanded(
  child: StreamBuilder<DatabaseEvent>(
    stream: starCountRef.onValue,
    builder: (context, AsyncSnapshot<DatabaseEvent> snapshot) {
      // 处理错误状态
      if (snapshot.hasError) {
        return const Text('加载出错');
      }

      // 处理加载状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }

      // 检查快照数据是否存在
      if (!snapshot.hasData || snapshot.data!.snapshot.value == null) {
        return const Text('暂无数据');
      }

      // 一次性解析数据并转换为有序列表
      final dataMap = snapshot.data!.snapshot.value as Map<dynamic, dynamic>;
      final inventoryList = dataMap.entries.map((entry) {
        // 这里可根据你的数据结构提取具体字段，比如entry.value['productName']
        return entry.value;
      }).toList();

      return ListView.builder(
        itemCount: inventoryList.length,
        itemBuilder: (context, index) {
          final item = inventoryList[index];
          // 替换成你实际要展示的字段，比如item['productName']
          return ListTile(
            title: Text(item.toString()),
          );
        },
      );
    },
  ),
)