使用 flutter 从 Firestore 获取数据以获取角色库主页视图

Question

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();
      }
    });  
}

role prints a null value i'm trying to show different views depending on the firestore data(role) for a logged in user

Answer 1

That happens because you are using.then instead of await.

When you use.then the code will execute without waiting for the firebase call to complete and that will print your role as null because it doesn't have data. So you'll have to use await to get the user data.

You can either use a future builder or use some other approach to update the UI once you get the user data.

Answer 2

Firebase methods are asynchronous meaning they return a Future that will be resolved in future. So here in the code Firebase document get method simply return a future that has not been resolved yet, thus printing a null value for role, Since you can not use asyn-await inside of a builder method you can use a FutureBuilder Widget to tackle this issue, the code would look something like this-

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();
        }
      },
    );
  }
}

As you can see I have added FutureBuilder to the code, this will make Firebase document get method to wait until its future is resolved then only it will proceed with code.

Hope this helps!