使用StreamBuilder在Flutter ListView中获取数据时出现类型转换错误

问题原因 #

你代码里强行将snapshot.data?.snapshot.value转为Map<dynamic, dynamic>，但实际Firebase数据库中Users/data节点存储的是数组（List）结构，而非键值对（Map），类型不匹配导致红屏错误。

修正方案 #

1. 先判断返回数据的实际类型，避免直接强转
2. 根据数据类型（List/Map）分别处理数据解析逻辑
3. 优化空值判断，避免空指针异常

修正后的完整代码 #

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final ref = FirebaseDatabase.instance.ref("Users").child("data");
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: StreamBuilder(
              stream: ref.onValue,
              builder: (context, AsyncSnapshot<DatabaseEvent> snapshot) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                }

                if (!snapshot.hasData || snapshot.data?.snapshot.value == null) {
                  return const CircularProgressIndicator();
                }

                // 先获取数据并判断类型
                final data = snapshot.data!.snapshot.value;
                List<dynamic> list = [];

                if (data is List) {
                  // 如果是List类型，直接赋值
                  list = data;
                } else if (data is Map) {
                  // 如果是Map类型，取values转成List
                  list = data.values.toList();
                }

                return ListView.builder(
                  itemCount: list.length,
                  itemBuilder: (context, index) {
                    final item = list[index] as Map<dynamic, dynamic>;
                    return ListTile(
                      title: Text(item["id"]?.toString() ?? "无ID"),
                      leading: Image.network(item["image"]?.toString() ?? ""),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

• 如果你的数据库Users/data是数组结构（比如["{id:1, image:'xxx'}", ...]），上面代码会直接解析List
• 如果是带键的Map结构（比如{"user1":{id:1, image:'xxx'}, "user2":...}），代码会自动转成List
• 增加了空值判断（item["id"]?.toString() ?? "无ID"），避免因数据缺失导致的崩溃

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