如何在Flutter中从Firebase读取List<String>并解决快照错误

问题根源 #

1. 类型不匹配：Firestore返回的elements字段是List<dynamic>类型，直接赋值给List<String>会触发类型转换异常，导致快照解析失败。
2. 空列表风险：直接访问pokemon.elements[0]如果列表为空，会抛出索引越界错误。

修复步骤 #

1. 修正fromJson的类型转换 #

在Pokemon类的fromJson方法中，将Firestore返回的动态列表显式转换为List<String>，同时处理字段不存在或为空的情况：

static Pokemon fromJson(Map<String, dynamic> json) => Pokemon(
      id: json['id'] ?? '',
      name: json['name'],
      size: json['size'],
      // 显式转换为List<String>，空值时返回空列表避免报错
      elements: List<String>.from(json['elements'] ?? []),
    );

额外给id加上空值判断，防止Firestore文档未携带id字段时出现异常。

2. 安全展示列表内容 #

在buildPokemon的subtitle部分，先判断列表是否为空，再决定展示逻辑：

subtitle: Text(
  pokemon.elements.isNotEmpty 
      ? '${pokemon.size} ${pokemon.elements[0]}' 
      : pokemon.size,
),

如果需要展示所有元素，可以用join方法拼接：

subtitle: Text(
  '${pokemon.size} ${pokemon.elements.join(', ')}',
),

完整修改后的代码 #

Pokemon类 #

class Pokemon {
  String id;
  final String name;
  final String size;
  final List<String> elements;

  Pokemon({this.id = '', required this.name, required this.size, required this.elements});

  Map<String, dynamic> toJson() => {'id': id, 'name': name, 'size': size, 'elements': elements};

  static Pokemon fromJson(Map<String, dynamic> json) => Pokemon(
        id: json['id'] ?? '',
        name: json['name'],
        size: json['size'],
        elements: List<String>.from(json['elements'] ?? []),
      );
}

buildPokemon方法 #

Widget buildPokemon(Pokemon pokemon, BuildContext context) => InkWell(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => PokemonDetailPage(pokemon: pokemon),
        ));
      },
      child: Card(
        elevation: 10.0,
        child: Column(
          children: [
            ListTile(
              title: Text(pokemon.name),
              subtitle: Text(
                pokemon.elements.isNotEmpty 
                    ? '${pokemon.size} ${pokemon.elements[0]}' 
                    : pokemon.size,
              ),
              trailing: IconButton(
                onPressed: () {
                  QuickAlert.show(
                    context: context,
                    type: QuickAlertType.confirm,
                    title: "确定要删除${pokemon.name}吗？",
                    onConfirmBtnTap: () {
                      FirebaseFirestore.instance
                          .collection('Pokemon')
                          .doc(pokemon.id)
                          .delete();
                      Navigator.pop(context);
                    },
                  );
                },
                icon: const Icon(Icons.delete, color: Colors.red),
              ),
            ),
          ],
        ),
      ),
    );

内容的提问来源于stack exchange，提问作者Mathias Van Langendonck