Flutter用FutureBuilder下拉按钮展示Firestore文档ID报错求助

我想在Flutter中通过FutureBuilder将Cloud Firestore里Exam集合的文档ID展示在下拉按钮中，但运行改写后的代码出现报错。

原本能正常获取文档ID的代码：

class _MyHomePageState extends State<MyHomePage> {
    final userRef = FirebaseFirestore.instance.collection('/Exam');

@override
Widget build(BuildContext context) {
return Container(
  child: TextButton(
    child: Text('press'),
    onPressed: () {
      userRef.get().then((snapshot) {
        snapshot.docs.forEach((doc) {
          print(doc.id);
        });
      });
    },
  ),
  );
 }
}

改写后的FutureBuilder实现代码：

FutureBuilder(
  future: db.collection('/Exam').get(),
  builder:
      (BuildContext context, AsyncSnapshot asyncSnapshot) {
    if (asyncSnapshot.hasError)
      return Text("Error: ${asyncSnapshot.error}");
    if (!asyncSnapshot.hasData)
      return const CircularProgressIndicator();

    return DropdownButton<String>(
      isExpanded: true,
      items: asyncSnapshot.data!.docs
          .map(
            (snap) => DropdownMenuItem(
              value: snap.id,
              child: Text(
                snap.id.toString(),
              ),
            ),
          )
          .toList(),
      value: _selectedexam,
      onChanged: (String? newValue) {
        setState(() {
          _selectedexam = newValue!;
          _selectedsemester = null;
          print(_selectedexam);
        });
      },
    );
  }),

报错核心信息：
type '_JsonQuerySnapshot' is not a subtype of type 'QuerySnapshot<Map<String, dynamic>>'

报错根源是FutureBuilder未指定泛型类型，导致Flutter无法正确识别Firestore返回的QuerySnapshot类型，引发类型转换异常。结合代码细节，修复方案如下：

1. 指定FutureBuilder泛型：明确声明FutureBuilder<QuerySnapshot<Map<String, dynamic>>>，让编译器识别异步返回的快照类型。
2. 统一集合引用：复用原代码中的userRef，避免db未初始化或拼写错误的问题。
3. 处理初始值为空场景：下拉按钮的value若为null，需添加提示文本或默认选中第一个选项，避免渲染异常。

修正后的完整代码：

class _MyHomePageState extends State<MyHomePage> {
  final userRef = FirebaseFirestore.instance.collection('/Exam');
  String? _selectedexam;
  String? _selectedsemester;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<QuerySnapshot<Map<String, dynamic>>>(
        future: userRef.get(),
        builder: (context, asyncSnapshot) {
          if (asyncSnapshot.hasError) {
            return Text("加载失败: ${asyncSnapshot.error}");
          }
          if (asyncSnapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }

          final examIds = asyncSnapshot.data!.docs.map((doc) => doc.id).toList();
          // 初始状态自动选中第一个文档ID（可选）
          if (_selectedexam == null && examIds.isNotEmpty) {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              setState(() => _selectedexam = examIds.first);
            });
          }

          return DropdownButton<String>(
            isExpanded: true,
            hint: const Text('选择考试'),
            items: examIds.map((id) => DropdownMenuItem(
              value: id,
              child: Text(id),
            )).toList(),
            value: _selectedexam,
            onChanged: (newValue) {
              setState(() {
                _selectedexam = newValue;
                _selectedsemester = null;
                print(_selectedexam);
              });
            },
          );
        },
      ),
    );
  }
}

• 不要在build方法中直接创建Future（如userRef.get()），每次页面重建都会重复发起请求，建议将Future存储在State变量中，或使用状态管理工具（如FutureProvider）优化。
• 确保Firebase初始化完成，在main方法中添加：

  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    runApp(const MyApp());
  }
  

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