Flutter中使用StreamBuilder加载FireStore数据时出现NoSuchMethodError求助

我正在开发一款Quiz应用，尝试从FireStore拉取测验数据并以流的形式展示在页面上。参考教程编写snapshot.data.documents[index].data['']代码时，出现如下错误：

构建StreamBuilder(dirty, state: _StreamBuilderBaseState<dynamic, AsyncSnapshot>#92653)时抛出NoSuchMethodError，提示找不到'documents'方法，接收者为_JsonQuerySnapshot实例。

最初因Stream为非可空类型报错，添加空检查运算符后，就出现了这个NoSuchMethodError。

相关代码：

class _TeacherState extends State<Teacher> {

  Stream? quizStream;
  final user = FirebaseAuth.instance.currentUser!;
  DatabaseService databaseService = new DatabaseService();

  Widget quizList() {
    return Column(
      children: [
        StreamBuilder(
          stream: quizStream,
          builder: (context, AsyncSnapshot snapshot) {
            return snapshot.data == null
                ? Container()
                : ListView.builder(
                    shrinkWrap: true,
                    physics: ClampingScrollPhysics(),
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (context, index) {
                      return QuizTile(
                        noOfQuestions: snapshot.data.documents.length,
                        imageUrl:
                            snapshot.data.documents[index].data['quizImgUrl'],
                        title:
                            snapshot.data.documents[index].data['quizTitle'],
                        description:
                            snapshot.data.documents[index].data['quizDescription'],
                        id: snapshot.data.documents[index].data["quizID"],
                      );
                    });
          },
        )
      ],
    );
  }
}

解决方案 #

问题出在你参考的教程用的是旧版Firebase Firestore SDK，新版SDK里QuerySnapshot的API做了改动：

• 原来的documents属性换成了docs
• 原来获取文档数据的.data属性换成了.data()方法（需要带括号调用）

修改后的代码如下：

Widget quizList() {
  return Column(
    children: [
      StreamBuilder<QuerySnapshot>( // 指定泛型，让类型更安全
        stream: quizStream,
        builder: (context, snapshot) {
          // 加载状态显示转圈动画
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 无数据时给用户明确提示
          if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
            return const Center(child: Text("暂无测验数据"));
          }
          return ListView.builder(
            shrinkWrap: true,
            physics: const ClampingScrollPhysics(),
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
              final quizDoc = snapshot.data!.docs[index];
              // 转换数据类型，避免动态类型警告
              final quizData = quizDoc.data() as Map<String, dynamic>;
              return QuizTile(
                noOfQuestions: snapshot.data!.docs.length,
                imageUrl: quizData['quizImgUrl'],
                title: quizData['quizTitle'],
                description: quizData['quizDescription'],
                id: quizData["quizID"],
              );
            });
        },
      )
    ],
  );
}

额外优化点：

• 给StreamBuilder指定泛型QuerySnapshot，代码类型更安全，减少潜在bug
• 添加加载状态处理，显示加载动画提升用户体验
• 处理无数据场景，给用户清晰提示
• 提取文档和数据变量，让代码更简洁易读

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