Flutter中如何保留Firestore文档快照获取的变量值？

这是异步操作执行顺序导致的问题：member.user.get()是异步方法，.then()回调内的代码会在Firestore返回数据后才执行，但回调外的代码会先于回调运行，所以此时memberName还未被赋值，自然为空。

解决方案1：使用FutureBuilder（推荐） #

在Flutter中，处理异步数据渲染最直接的方式是用FutureBuilder组件，它会自动监听Future的状态变化，根据不同状态返回对应Widget：

Widget buildGroupMemberTile(GroupMember member) {
  return FutureBuilder<DocumentSnapshot>(
    // 传入Firestore的异步获取方法
    future: member.user.get(),
    builder: (context, snapshot) {
      // 数据加载中
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Text('加载中...');
      }

      // 加载出错
      if (snapshot.hasError) {
        return const Text('加载失败');
      }

      // 成功获取数据
      if (snapshot.hasData) {
        final memberName = snapshot.data!.get('Full_Name');
        print(memberName); // 正常输出John Smith
        return Text(memberName);
      }

      // 默认 fallback
      return const Text('未知成员');
    },
  );
}

解决方案2：StatefulWidget结合async/await #

如果需要在Widget生命周期中管理异步数据，可使用StatefulWidget配合异步方法：

class GroupMemberTile extends StatefulWidget {
  final GroupMember member;

  const GroupMemberTile({super.key, required this.member});

  @override
  State<GroupMemberTile> createState() => _GroupMemberTileState();
}

class _GroupMemberTileState extends State<GroupMemberTile> {
  String memberName = '';
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    // 初始化时加载数据
    _fetchMemberName();
  }

  Future<void> _fetchMemberName() async {
    final docSnapshot = await widget.member.user.get();
    setState(() {
      memberName = docSnapshot.get('Full_Name');
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return const Text('加载中...');
    }
    print(memberName); // 正常输出John Smith
    return Text(memberName);
  }
}

核心原理 #

两种方案都是通过Flutter的状态更新机制，确保在异步数据获取完成后，重新构建Widget并使用正确的memberName值，避免了异步回调与同步代码执行顺序冲突的问题。

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