Flutter中如何将Firestore数组数据展示在DropdownButton中

你的代码核心错误有两个：

1. 直接将FirebaseFirestore.instance.collection('shoppingList').doc('category')返回的DocumentReference对象赋值给List<String>类型变量，类型完全不匹配
2. Firestore数据获取是异步操作，无法同步直接拿到结果

以下是正确的实现方案：

1. 状态变量定义 #

在你的State类中定义需要的状态变量：

List<String> listCategorys = [];
bool isLoading = true;
String categoryName = 'fruit';

2. 异步获取Firestore数据 #

在initState中调用异步方法加载数据：

@override
void initState() {
  super.initState();
  _loadCategoriesFromFirestore();
}

Future<void> _loadCategoriesFromFirestore() async {
  try {
    // 获取指定文档的快照
    final docSnapshot = await FirebaseFirestore.instance
        .collection('shoppingList')
        .doc('category')
        .get();

    if (docSnapshot.exists) {
      final docData = docSnapshot.data();
      // 从文档中提取'foto'数组，转换为String列表
      if (docData != null && docData['foto'] != null) {
        setState(() {
          listCategorys = List<String>.from(docData['foto']);
          // 确保默认选中的categoryName在列表中，否则选中第一个元素
          if (!listCategorys.contains(categoryName) && listCategorys.isNotEmpty) {
            categoryName = listCategorys.first;
          }
        });
      }
    }
  } catch (error) {
    print('加载分类失败: $error');
  } finally {
    setState(() {
      isLoading = false;
    });
  }
}

3. 渲染DropdownButton（含状态处理） #

在build方法中根据加载状态和数据情况渲染UI：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: isLoading
          ? // 加载中显示进度指示器
            const CircularProgressIndicator()
          : listCategorys.isEmpty
              ? // 无数据时提示
                const Text('暂无分类数据')
              : // 数据加载完成后渲染DropdownButton
                DropdownButton<String>(
                    focusColor: Colors.white,
                    value: categoryName,
                    style: const TextStyle(color: Colors.white),
                    iconEnabledColor: Colors.black,
                    items: listCategorys
                        .map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Padding(
                          padding: const EdgeInsets.only(left: 42),
                          child: Text(
                            value,
                            style: const TextStyle(
                              color: Colors.black,
                              fontSize: 18,
                            ),
                          ),
                        ),
                      );
                    }).toList(),
                    hint: const Text(
                      "Select categories",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 24,
                          fontWeight: FontWeight.w500),
                    ),
                    onChanged: (String? value) {
                      setState(() {
                        categoryName = value!;
                      });
                    },
                  ),
    ),
  );
}

关键说明 #

• 使用await等待Firestore文档获取完成，确保拿到数据后再更新状态
• 用List<String>.from()将Firestore返回的动态类型数组转换为String列表，避免类型错误
• 增加加载状态和空数据处理，防止UI报错并提升用户体验
• 校验默认选中值是否在列表中，避免DropdownButton因值不存在而报错

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