Flutter Firebase如何访问followers字段内uid展示用户头像用户名

我正在开发一款新应用，已将粉丝数据存入Firebase Firestore的users集合对应文档的followers字段中，需要访问该字段内存储的用户uid，拉取对应用户头像与用户名并完成列表展示。

现有实现无法正确读取字段内的uid信息完成列表渲染，涉及两个业务文件：followers.screen.dart、followers_card.dart。

• 错误监听根级users集合的全量数据，没有先定位到当前查看的目标用户文档，遍历全量用户的逻辑和粉丝列表需求完全不匹配
• 对followers字段结构认知错误：该字段是存储粉丝uid的数组类型，不是单个文档ID，原有代码直接将数组作为docId传入查询必然触发报错
• 卡片内查询逻辑完全不符合数据结构：不存在用户文档下嵌套users子集合的设计，所有用户数据都存放在根级users集合中
• 没有针对数组内的uid做定向批量查询，也没有将查询到的粉丝用户数据传递给卡片组件完成渲染

followers.screen.dart #

首先你需要通过路由传参拿到当前查看账号的用户ID（示例中用profileUid指代，替换为你实际的传参变量即可），先拉取目标用户的文档快照获取粉丝uid数组，再批量查询粉丝的公开信息完成渲染：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
// 引入你项目里的FollowersCard、全局常量、工具类即可

class FollowersScreen extends StatefulWidget {
  final String profileUid; // 当前查看粉丝列表的用户ID，通过路由传入
  const FollowersScreen({Key? key, required this.profileUid}) : super(key: key);

  @override
  State<FollowersScreen> createState() => _FollowersScreenState();
}

class _FollowersScreenState extends State<FollowersScreen> {
  // 存储粉丝用户数据
  List<Map<String, dynamic>> followersList = [];
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    getFollowersData();
  }

  Future<void> getFollowersData() async {
    setState(() {
      isLoading = true;
    });
    try {
      // 1. 获取当前用户文档，拿到followers字段存储的uid数组
      DocumentSnapshot userDoc = await FirebaseFirestore.instance
          .collection('users')
          .doc(widget.profileUid)
          .get();
      List<dynamic> followerUids = (userDoc.data() as Map<String, dynamic>)['followers'] ?? [];
      
      if (followerUids.isEmpty) {
        setState(() {
          followersList = [];
          isLoading = false;
        });
        return;
      }

      // 2. 处理Firestore whereIn单次最多匹配10个值的限制，分片查询
      List<Map<String, dynamic>> tempList = [];
      for (var i = 0; i < followerUids.length; i += 10) {
        var end = (i + 10 < followerUids.length) ? i + 10 : followerUids.length;
        List<dynamic> chunk = followerUids.sublist(i, end);
        // 批量查询该组uid对应的用户数据
        QuerySnapshot followerQuery = await FirebaseFirestore.instance
            .collection('users')
            .where(FieldPath.documentId, whereIn: chunk)
            .get();
        tempList.addAll(followerQuery.docs.map((e) => e.data() as Map<String, dynamic>));
      }

      setState(() {
        followersList = tempList;
      });
    } catch (e) {
      showSnackBar(e.toString(), context);
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: mobileBackgroundColor,
        centerTitle: true,
        title: Image.asset(
          'Resim/logo.png',
          height: 50,
        ),
      ),
      body: isLoading
          ? const Center(child: CircularProgressIndicator())
          : followersList.isEmpty
              ? const Center(child: Text('暂无粉丝'))
              : ListView.builder(
                  itemCount: followersList.length,
                  itemBuilder: (context, index) => FollowersCard(
                    snap: followersList[index],
                  ),
                ),
    );
  }
}

followers_card.dart #

卡片组件不需要单独发起数据查询，直接接收父组件传入的单个粉丝用户数据渲染即可，删除原有错误的查询逻辑：

import 'package:flutter/material.dart';
// 引入你项目的全局常量即可

class FollowersCard extends StatelessWidget {
  final Map<String, dynamic> snap;

  const FollowersCard({
    Key? key,
    required this.snap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        color: mobileBackgroundColor,
        child: Card(
          child: Column(children: [
            // 用户信息头部
            Container(
              padding: const EdgeInsets.symmetric(
                vertical: 4,
                horizontal: 16,
              ).copyWith(right: 0),
              child: Row(
                children: [
                  CircleAvatar(
                    radius: 16,
                    backgroundImage: NetworkImage(
                      snap['photoUrl'],
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(left: 8),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            snap['username'],
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            )
          ]),
        ));
  }
}

• 如果需要实时监听粉丝列表的增减变化，可以把一次性数据请求替换为流监听，记得在dispose生命周期里取消订阅避免内存泄漏
• 批量查询返回的结果默认不跟随传入uid的顺序排列，如果需要按照关注时间排序，建议将followers字段的存储结构从纯uid数组调整为对象数组，每个元素包含uid和followTime时间戳字段
• 如果粉丝数据量极大，建议改用分页查询的方式加载，避免一次性拉取全量数据造成性能问题

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