使用 Flutter 从 Firestore 获取数据以获取角色库主视图答案

【问题标题】：get data from firestore using flutter for role base home view使用 Flutter 从 Firestore 获取数据以获取角色库主视图
【发布时间】：2020-10-25 10:04:58
【问题描述】：

class Authservice {
handleAuth() {
 return StreamBuilder(
 stream: FirebaseAuth.instance.onAuthStateChanged,
    builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
        var role;
        Firestore.instance
            .collection('users')
            .document(snapshot.data.uid)
            .get()
.then((DocumentSnapshot ds) {
          role = ds.data['role'];
        });
        print('role');
        print(role);
        if (role == 'user') {
          return OwnerHome();
        } else {
          return CustomerHome();
}
      } else {
        return Signin();
      }
    });  
}

角色打印一个空值我正在尝试根据登录用户的 Firestore 数据（角色）显示不同的视图

【问题讨论】：

标签： android flutter dart google-cloud-firestore

【解决方案1】：

Firebase 方法是 asynchronous，这意味着它们返回的 Future 将在未来得到解决。所以这里的代码 Firebase 文档 get 方法只是返回一个尚未解决的未来，从而为角色打印一个空值，由于您不能在构建器方法中使用 asyn-await，您可以使用 FutureBuilder 小部件来解决这个问题，代码看起来像这样-

class Authservice {
  handleAuth() {
    return StreamBuilder(
      stream: FirebaseAuth.instance.onAuthStateChanged,
      builder: (BuildContext context, snapshot) {
        if (snapshot.hasData) {
          return FutureBuilder<DocumentSnapshot>(
            future: Firestore.instance
                .collection('users')
                .document(snapshot.data.uid)
                .get(),
            builder: (BuildContext context,
                AsyncSnapshot<DocumentSnapshot> snapshot) {
              if (snapshot.hasData) {
                DocumentSnapshot ds = snapshot.data;
                role = ds.data['role'];
                print('role');
                print(role);
                if (role == 'user') {
                  return OwnerHome();
                } else {
                  return CustomerHome();
                }
              } else {
                //Handle whenn user does not exists!
              }
            },
          );
        } else {
          return Signin();
        }
      },
    );
  }
}

如您所见，我已将 FutureBuilder 添加到代码中，这将使 Firebase 文档获取方法等待其未来解决，然后才会继续执行代码。

希望这会有所帮助！

【讨论】：

我试过它不能使用未来作为构建器参数
我已经用 FutureBuilder 更新了我的答案，如果有帮助，请看看！
将 FutureBuilder 更改为 FutureBuilder 并且效果非常好
是的，我发现了这个错误，并相应地更新了解决方案。谢谢。

【解决方案2】：

发生这种情况是因为您使用的是 .then 而不是 await。

当您使用 .then 时，代码将在不等待 firebase 调用完成的情况下执行，并且将您的角色打印为 null，因为它没有数据。所以你必须使用 await 来获取用户数据。

您可以使用未来的构建器或使用其他方法在获取用户数据后更新 UI。

【讨论】：