如何在Flutter Widget中从Firestore获取并显示用户数据？

你已经拿到了Firestore的用户文档引用，但还缺少获取文档实际数据的关键步骤，下面给你两种实用的解决方案：

方案1：通过状态变量手动管理数据 #

首先在你的State类里添加一个存储用户数据的状态变量：

Map<String, dynamic>? userData;

然后修改你的_getUserDoc方法，让它不仅获取文档引用，还拉取文档数据并更新页面状态：

Future<void> _getUserDoc() async {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final Firestore _firestore = Firestore.instance;
  FirebaseUser user = await _auth.currentUser();
  // 调用get()方法获取文档快照，拿到实际数据
  DocumentSnapshot docSnapshot = await _firestore.collection('users').document(user.uid).get();
  setState(() {
    userData = docSnapshot.data; // 将文档数据存入状态变量
  });
}

记得在组件初始化时调用这个方法：

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

最后修改Text组件，用状态变量里的name字段替换固定文本，同时处理数据加载中的过渡状态：

Padding(
  padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0),
  child: Text(
    userData?['name'] ?? 'Loading...', // 数据未加载完成时显示提示文本
    style: TextStyle(
      fontFamily: 'Montserrat',
      fontWeight: FontWeight.bold,
      fontSize: 17.0,
    ),
  ),
),

方案2：用FutureBuilder优雅处理异步数据 #

如果不想手动管理setState，可以用FutureBuilder组件自动处理异步数据的加载、错误、完成状态：

先定义一个专门获取用户数据的方法：

Future<DocumentSnapshot> _fetchUserData() async {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final Firestore _firestore = Firestore.instance;
  FirebaseUser user = await _auth.currentUser();
  return _firestore.collection('users').document(user.uid).get();
}

然后把Text组件包裹在FutureBuilder里：

Padding(
  padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0),
  child: FutureBuilder<DocumentSnapshot>(
    future: _fetchUserData(),
    builder: (context, snapshot) {
      // 处理加载中状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Text(
          'Loading...',
          style: TextStyle(
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.bold,
            fontSize: 17.0,
          ),
        );
      }
      // 处理数据加载错误状态
      if (snapshot.hasError) {
        return Text(
          'Failed to load name',
          style: TextStyle(
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.bold,
            fontSize: 17.0,
          ),
        );
      }
      // 数据加载完成，展示用户名
      final userData = snapshot.data?.data;
      return Text(
        userData?['name'] ?? 'Unknown User', // 数据为空时显示默认文本
        style: TextStyle(
          fontFamily: 'Montserrat',
          fontWeight: FontWeight.bold,
          fontSize: 17.0,
        ),
      );
    },
  ),
),

关键说明 #

你之前的代码只获取了Firestore文档的引用（userRef），但并没有实际拉取文档里的内容。必须调用get()方法获取DocumentSnapshot，才能从snapshot.data里拿到name、photoURL等字段。

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