Flutter如何在自定义个人资料页展示Firestore当前用户数据

开发者阿泽

2026-8-31

图片说明

个人资料页功能实现着手方向

首先先修正你现有注册写入逻辑的几个问题，不然后续取数会增加不必要的复杂度：

不要用add()方法给users集合生成随机文档ID，注册流程拿到Firebase Auth返回的用户凭证后，直接用用户的唯一标识UID作为users集合下的文档ID，后续查询当前用户数据不需要做条件匹配，直接按ID读取即可，逻辑简单且查询性能更高
你当前写入代码里的字段'yesr': year存在拼写错误，后续按字段名取值会拿不到对应数据
绝对不要在Firestore中明文存储用户密码，Firebase Auth本身已经托管了所有认证相关的凭证校验，你额外存储密码属于严重的安全隐患，直接删掉该字段即可

修正后的用户资料写入代码参考：

// 注册成功拿到UserCredential对象后调用该方法，传入credential.user.uid作为文档ID
Future<void> saveUserProfile(
  String uid,
  String firstName,
  String lastName,
  int year,
  int month,
  int day,
  String email,
) async {
  await FirebaseFirestore.instance.collection('users').doc(uid).set({
    'firstName': firstName,
    'lastName': lastName,
    'birthYear': year,
    'birthMonth': month,
    'birthDay': day,
    'email': email,
    // 后续要存手机号、位置信息时，直接在这里新增对应字段即可：手机号建议直接绑定到Firebase Auth的用户属性上，位置可以存为GeoPoint类型
  });
}

个人资料页的开发按3步走即可：

先获取当前登录态的用户身份：直接调用FirebaseAuth.instance.currentUser就能拿到当前已登录的用户对象，如果返回值为null说明用户未登录，直接跳转登录页即可；这个对象本身就内置了email、phoneNumber这类认证层的基础属性，不需要额外从Firestore读取
拿上一步获取到的用户UID，到users集合下读取对应ID的文档，就能拿到你之前存储的姓名、生日、位置等自定义业务字段
用FutureBuilder或者StreamBuilder包裹你已经写好的个人资料页UI，异步加载数据时显示加载占位，数据返回后把对应字段赋值给页面的文本组件即可

个人资料页最简实现代码参考：

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    final currentUser = FirebaseAuth.instance.currentUser;
    // 未登录状态处理
    if (currentUser == null) {
      return const Center(child: Text('请先登录账号'));
    }

    return FutureBuilder<DocumentSnapshot>(
      // 按UID直接查询用户文档，无额外查询开销
      future: FirebaseFirestore.instance.collection('users').doc(currentUser.uid).get(),
      builder: (context, snapshot) {
        // 加载中状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 加载错误处理
        if (snapshot.hasError) {
          return Center(child: Text('资料加载失败：${snapshot.error}'));
        }
        // 解析用户数据
        final userData = snapshot.data!.data() as Map<String, dynamic>;
        // 渲染你已经写好的个人资料UI
        return ListView(
          padding: const EdgeInsets.all(16),
          children: [
            ListTile(
              title: const Text('邮箱'),
              subtitle: Text(currentUser.email ?? '未绑定邮箱'),
            ),
            ListTile(
              title: const Text('手机号'),
              subtitle: Text(currentUser.phoneNumber ?? '未绑定手机号'),
            ),
            ListTile(
              title: const Text('姓名'),
              subtitle: Text('${userData['firstName']} ${userData['lastName']}'),
            ),
            ListTile(
              title: const Text('生日'),
              subtitle: Text('${userData['birthYear']}年${userData['birthMonth']}月${userData['birthDay']}日'),
            ),
            // 后续新增的位置等字段，在这里加对应的ListTile即可
          ],
        );
      },
    );
  }
}

如果后续需要实现用户修改资料后页面自动刷新的效果，把FutureBuilder替换为StreamBuilder，将查询方法的.get()换成.snapshots()即可实现数据实时监听。

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