Flutter中如何通过指定用户ID集合从Firestore获取对应数据

你在Flutter开发中遇到的核心问题如下：

• 实现流程：通过StreamBuilder拉取全量用户数据，借助Bloc/Cubit完成距离过滤后，得到存储符合条件用户ID的Set集合，需要基于这些ID拉取对应用户的邮箱、头像、状态等完整详情数据
• 异常表现：在列表构建逻辑中调用FirebaseFirestore.instance.collection(...).doc(userId).get()时，误判返回值为Future<String?>类型，无法直接获取数据渲染组件
• 原有实现存在多处逻辑缺陷，可参考以下方案修复

class HomePageBody extends StatelessWidget {
  HomePageBody({
    Key? key,
    required this.mapsState,
  }) : super(key: key);

  final MapsState mapsState;

  final Set users = {};
  @override
  Widget build(BuildContext context) {

    return StreamBuilder<QuerySnapshot>(
      stream: firestoreStream,
      builder: (context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) {
          return const CustomProgressIndicator(
            progressIndicatorColor: blackColor,
          );
        } else if (!snapshot.hasData) {
          return const CustomProgressIndicator(
            progressIndicatorColor: blackColor,
          );
        } else if (snapshot.hasData) {
          final usersDatas = snapshot.data.docs;

          for (var userDatas in usersDatas) {
            if (userDatas["latitude"] == null || userDatas["longitude"] == null) {
            } else {
              users.add(userDatas);
            }
          }
          context.read<MapsCubit>().filterUsersWithRespectToDistance(users: users);
          final usersWithInTenKilometers = mapsState.usersWithInTenKilometers;

          // 此处已得到过滤后的用户ID集合
          return ListView.builder(
                  padding: const EdgeInsets.only(top: 75),
                  itemCount: usersWithInTenKilometers.length,
                  itemBuilder: (context, index) {
                    final userId = usersWithInTenKilometers.elementAt(index);
                    final usersDatas = FirebaseFirestore.instance
                        .collection("users")
                        .doc(userId)
                        .get();
                        // 直接调用get方法无法拿到可用数据

                    return CustomListTile(
                      userImageUrl: "https://picsum.photos/200/300",
                      userStatus: "userStatus",
                      userName: "userName",
                    );
                  },
                );
        }
        return const CustomProgressIndicator(
          progressIndicatorColor: blackColor,
        );
      },
    );
  }
}

• 类型认知错误：DocumentReference.get()是异步方法，正确返回类型为Future<DocumentSnapshot<Map<String, dynamic>>>，不存在返回Future<String?>的情况，是你未做类型声明导致的推导偏差
• 异步逻辑未处理：直接接收Future对象没有等待结果返回，自然拿不到文档中的用户数据
• 生命周期违规：在StreamBuilder的build回调中直接调用Cubit方法触发状态更新，会导致组件循环重绘报错
• 状态存放错误：在StatelessWidget中定义可变Set集合存储用户数据，每次组件重绘都会重复初始化、重复添加数据，导致集合冗余
• 性能缺陷：在列表item的build方法中单独发起用户详情请求，列表滚动时会重复触发大量无效请求，浪费流量和性能

推荐使用Cubit层统一批量拉取的方案，性能更好、逻辑更清晰，避免UI层直接处理数据请求逻辑：

1. 把用户过滤、详情拉取的逻辑全部收敛到Cubit层，UI层只负责消费状态
2. 利用Firestore的whereIn能力批量拉取用户详情，注意whereIn单次最多支持传入10个ID，超过10个需要分片请求
3. 禁止在build方法中直接触发状态更新，需要触发事件时用WidgetsBinding.instance.addPostFrameCallback包裹，避免build期间更新状态
4. 删除Widget中定义的可变Set集合，所有数据状态交由Bloc/Cubit托管

具体代码实现 #

第一步：在MapsCubit中新增批量拉取用户详情的方法 #

// MapsCubit内新增方法
Future<void> loadFilteredUserDetails(Set<String> filteredUserIds) async {
  final List<Map<String, dynamic>> userDetailList = [];
  // 分片处理，每次最多传10个ID
  for (int i = 0; i < filteredUserIds.length; i += 10) {
    final endIndex = i + 10 > filteredUserIds.length ? filteredUserIds.length : i + 10;
    final idChunk = filteredUserIds.toList().sublist(i, endIndex);
    final querySnap = await FirebaseFirestore.instance
        .collection("users")
        .where(FieldPath.documentId, whereIn: idChunk)
        .get();
    userDetailList.addAll(querySnap.docs.map((doc) => doc.data()).toList());
  }
  // 更新状态，把拉取到的用户详情列表存入state
  emit(state.copyWith(filteredUserDetails: userDetailList));
}

第二步：修正UI层代码 #

class HomePageBody extends StatelessWidget {
  const HomePageBody({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: firestoreStream,
      builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting || 
            snapshot.connectionState == ConnectionState.none ||
            !snapshot.hasData) {
          return const CustomProgressIndicator(
            progressIndicatorColor: blackColor,
          );
        }
        
        // 过滤经纬度为空的无效用户
        final validUsers = snapshot.data!.docs.where((doc) =>
          doc["latitude"] != null && doc["longitude"] != null
        ).toSet();
        
        // 避免build期间直接触发状态更新
        WidgetsBinding.instance.addPostFrameCallback((_) {
          context.read<MapsCubit>().filterUsersWithRespectToDistance(users: validUsers);
          final filteredIds = context.read<MapsCubit>().state.usersWithInTenKilometers;
          // 触发批量拉取用户详情
          context.read<MapsCubit>().loadFilteredUserDetails(filteredIds);
        });

        // 直接从Cubit状态中消费过滤后的用户详情数据
        return BlocBuilder<MapsCubit, MapsState>(
          builder: (context, mapsState) {
            final userList = mapsState.filteredUserDetails;
            if (userList.isEmpty) {
              return const CustomProgressIndicator(progressIndicatorColor: blackColor);
            }
            return ListView.builder(
              padding: const EdgeInsets.only(top: 75),
              itemCount: userList.length,
              itemBuilder: (context, index) {
                final userData = userList[index];
                return CustomListTile(
                  userImageUrl: userData["avatarUrl"] ?? "https://picsum.photos/200/300",
                  userStatus: userData["status"] ?? "",
                  userName: userData["name"] ?? "",
                );
              },
            );
          },
        );
      },
    );
  }
}

备选方案（少量用户场景） #

如果过滤后的用户量很少（少于10个），也可以在列表item中使用FutureBuilder包裹单个用户的请求逻辑，等待异步返回后再渲染组件，不需要批量拉取：

itemBuilder: (context, index) {
  final userId = usersWithInTenKilometers.elementAt(index);
  return FutureBuilder<DocumentSnapshot<Map<String, dynamic>>>(
    future: FirebaseFirestore.instance.collection("users").doc(userId).get(),
    builder: (context, userSnap) {
      if (!userSnap.hasData) {
        return const SizedBox(height: 60, child: Center(child: CircularProgressIndicator()));
      }
      final userData = userSnap.data!.data()!;
      return CustomListTile(
        userImageUrl: userData["avatarUrl"] ?? "https://picsum.photos/200/300",
        userStatus: userData["status"] ?? "",
        userName: userData["name"] ?? "",
      );
    },
  );
}

内容的提问来源于stack exchange，提问作者Alper Efe Sahin