Flutter Firebase多集合查询：实现课程完成状态展示

一、修复代码实现需求 #

你的原代码存在两个核心问题：内层错误使用ListView.builder处理单个文档快照，以及未正确判断用户课程的完成状态。以下是修复后的完整代码：

修正后的Future方法 #

import 'package:cloud_firestore/cloud_firestore.dart';

// 获取所有课程列表，明确返回类型
Future<List<Map<String, dynamic>>> getListCourses() async {
  final querySnapshot = await FirebaseFirestore.instance.collection('/courses')
      .where("id", isNotEqualTo: "")
      .orderBy("id")
      .get();
  return querySnapshot.docs.map((doc) => doc.data()).toList();
}

// 获取单个用户课程文档，明确返回文档快照类型
Future<DocumentSnapshot<Map<String, dynamic>>> getCoursesUser(String idCourse) async {
  return FirebaseFirestore.instance.collection("/users/user@test.com/courses").doc(idCourse).get();
}

修正后的UI代码 #

return Scaffold(
  body: FutureBuilder<List<Map<String, dynamic>>>(
    future: getListCourses(),
    builder: (context, snapshot) {
      // 处理全局加载状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }
      if (!snapshot.hasData || snapshot.data!.isEmpty) {
        return const Center(child: Text("暂无课程"));
      }

      return ListView.builder(
        itemCount: snapshot.data!.length,
        itemBuilder: (context, index) {
          final course = snapshot.data![index];
          final courseId = course["id"];

          return FutureBuilder<DocumentSnapshot<Map<String, dynamic>>>(
            future: getCoursesUser(courseId),
            builder: (context, userCourseSnapshot) {
              // 处理单个课程的状态查询加载
              if (userCourseSnapshot.connectionState == ConnectionState.waiting) {
                return ListTile(
                  title: Text(course["name"] ?? "未命名课程"),
                  trailing: const CircularProgressIndicator(size: 20),
                );
              }

              // 判断课程是否完成
              bool isCompleted = false;
              if (userCourseSnapshot.hasData && userCourseSnapshot.data!.exists) {
                final status = userCourseSnapshot.data!.data()?["status"];
                isCompleted = status == "completed"; // 根据你的实际状态值调整
              }

              return ListTile(
                title: Text(course["name"] ?? "未命名课程"),
                trailing: isCompleted 
                    ? const Icon(Icons.check_circle, color: Colors.green) 
                    : const Icon(Icons.radio_button_unchecked, color: Colors.grey),
              );
            },
          );
        },
      );
    },
  ),
);

关键修复点 #

1. 明确了异步方法的返回类型，避免动态类型带来的隐患
2. 移除内层多余的ListView.builder，直接处理单个用户课程文档的结果
3. 增加了分阶段的加载状态提示，提升用户体验
4. 正确判断文档是否存在，并根据status字段确定是否显示完成图标

二、多集合查询的最佳实践 #

你当前的嵌套请求方式可以实现功能，但存在性能隐患，以下是更优的方案：

• 批量预查询优化
  不要为每个课程单独发起请求，先一次性获取用户所有已完成的课程ID，再遍历课程列表做匹配，将请求次数从N次（N为课程数量）减少到2次：

  Future<List<String>> getUserCompletedCourses() async {
    final snapshot = await FirebaseFirestore.instance.collection("/users/user@test.com/courses")
        .where("status", isEqualTo: "completed")
        .get();
    return snapshot.docs.map((doc) => doc.id).toList();
  }
  
  // 合并数据请求
  Future<(List<Map<String, dynamic>>, List<String>)> getCoursesWithCompletion() async {
    final courses = await getListCourses();
    final completedIds = await getUserCompletedCourses();
    return (courses, completedIds);
  }
  

• 数据结构优化
  在用户根文档中直接维护completedCourses数组，存储已完成的课程ID，这样只需要获取一次用户文档就能拿到所有完成状态，无需查询子集合：

  users -> user@test.com -> {
    "name": "Test User",
    "completedCourses": ["course1", "course3"]
  }
  

• 避免嵌套FutureBuilder性能问题
  嵌套FutureBuilder会触发大量并发请求，可能触发Firebase的请求频率限制，优先采用批量查询合并数据的方式。

• 实时更新用StreamBuilder
  如果需要实时同步用户课程完成状态，将get()换成snapshots()，使用StreamBuilder监听数据变化。

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