Flutter开发中如何将Firestore获取的数据正确填充到下拉菜单

你当前的代码存在两处核心逻辑错误，直接对应你遇到的两个问题：

• 你将DropdownSearch组件嵌套在文档遍历方法map内部，每读取1条Firestore的cupcake文档就会生成1个独立的下拉菜单，每个下拉仅包含当前文档的cupcake_name字段值，就会出现你截图里多个下拉堆叠的异常效果：
  
• 后续调整出现的类型报错，是因为你没有将Firestore返回的动态类型字段显式转为String类型，和DropdownSearch<String>声明的泛型不匹配：
  

你需要先遍历所有Firestore文档，将所有cupcake_name提取为一个完整的字符串列表，再传给单个下拉组件的items属性即可，修复后代码如下：

class _DropDownState extends State<DropDown> {
  final Stream<QuerySnapshot> _cupCakeStream = FirebaseFirestore.instance
      .collection('cupcake')
      .snapshots(includeMetadataChanges: true);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _cupCakeStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return const Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Text("Loading");
        }
        // 先提取所有cupcake_name为String列表
        List<String> cupcakeNames = snapshot.data!.docs.map((doc) {
          Map<String, dynamic> data = doc.data()! as Map<String, dynamic>;
          // 显式转为String，避免类型报错
          return data["cupcake_name"].toString();
        }).toList();
        
        return Container(
          // 只渲染一个DropdownSearch组件
          child: DropdownSearch<String>(
            mode: Mode.MENU,
            showSelectedItems: true,
            items: cupcakeNames,
            label: "Select  Category",
            popupItemDisabled: (String s) => s.startsWith('I'),
            onChanged: print,
          ),
        );
      },
    );
  }
}

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