Flutter获取Firestore当前用户username返回Future实例异常排查

需要在Flutter应用中获取当前已登录用户的username字段值，原有实现代码如下：

Future<String> get username async {
await FirebaseFirestore.instance
    .collection('users')
    .doc(user.uid)
    .get()
    .then((snapshot) {
  if (snapshot.exists) {
    return snapshot.data()!['username'].toString();
  }
});
return 'No User';
}

运行后返回结果为Instance of 'Future<String>'，无法获取到预期的用户名实际值。

• 混用async/await与then时，then回调内部的返回值不会被外层async方法接收，回调里返回的username仅在then作用域内生效，外层方法始终会走到最后一行返回'No User'
• 调用返回类型为Future的方法/getter时未使用await等待结果返回，直接拿到的是Future实例对象，打印结果就是Instance of 'Future<String>'

1. 修正getter逻辑 #

不要混用两种异步写法，优先用更直观的async/await写法：

Future<String> get username async {
  final userDoc = await FirebaseFirestore.instance
      .collection('users')
      .doc(user.uid)
      .get();
  if (userDoc.exists) {
    return userDoc.data()!['username'].toString();
  }
  return 'No User';
}

如果要保留then写法，需要在then调用前加return，把回调结果透传到外层：

Future<String> get username {
  return FirebaseFirestore.instance
      .collection('users')
      .doc(user.uid)
      .get()
      .then((snapshot) {
    if (snapshot.exists) {
      return snapshot.data()!['username'].toString();
    }
    return 'No User';
  });
}

2. 调用时正确等待Future结果 #

该getter是异步返回值，调用时必须加await（注意调用位置需要在async函数内）：

// 错误写法，拿到的是Future实例
// String name = username;

// 正确写法
String name = await username;

如果需要在Widget树中直接使用该值，可以用FutureBuilder自动处理异步状态：

FutureBuilder<String>(
  future: username,
  builder: (context, snapshot) {
    // 加载中状态
    if (snapshot.connectionState != ConnectionState.done) {
      return const CircularProgressIndicator();
    }
    // 错误状态
    if (snapshot.hasError) {
      return Text('获取用户名失败');
    }
    // 成功拿到值
    return Text('当前用户：${snapshot.data}');
  },
)

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