Flutter futurebuilder nested futures returning null

Question

I am trying to work with different user roles and after logging in they should be directed to different pages however the futurebuilder I am trying to use to do so returns null. The element.data['role'] is correct and is being printed out before the future is returned but is not returned to the futurebuilder.

Future<String> getUserRole() async {
    final result = await FirebaseAuth.instance.currentUser().then(
      (user) async {
        await Firestore.instance.collection("Users").getDocuments().then(
          (docs) {
            docs.documents.forEach((element) {
              print(element.documentID);
              print(user.uid);
              if (element.documentID == user.uid) {
                print(element.data['role']);
                return element.data['role'];
              }
            });
          },
        );
      },
    );
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getUserRole(),
      builder: (ctx, AsyncSnapshot<String> futureResult) {
        if (futureResult.connectionState == ConnectionState.waiting) {
          return Scaffold(
            body: Center(
              child: CircularProgressIndicator(),
            ),
          );
        } else if (futureResult.hasError) {
          Center(
            child: Text("Error"),
          );
        } else if (futureResult.hasData) {
          print("BUILDER");
          print(futureResult.data);
          if (futureResult.data == "Employer") {
            return EmployerTabsScreen();
          } else {
            return EmployeeTabsScreen();
          }
        } else {
          return Text("NONE");
        }
      },
    );
  }

Answer 1

Try to call return at all iterations and add a null (or other value) for handling situation where you are not returning a data:

Future<String> getUserRole() {
  return FirebaseAuth.instance.currentUser().then((user) {
    return Firestore.instance.collection("Users").getDocuments().then((docs) {
      var role = null;
      docs.documents.forEach((element) {
        print(element.documentID);
        print(user.uid);
        if (element.documentID == user.uid) {
          print(element.data['role']);
          role = element.data['role'];
        }
      });
      return role;
    });
  });
}

Answer 2

Because you mix randomly "async/await" with "then"-callbacks. Guess its not wrong to do that, but like in your example, its totally anreadable and makes everything harder than it could be.

At First:

    final result = await FirebaseAuth.instance.currentUser().then(
      (user) async {

If you declare something as "await", you dont need a callback. You should declare the result right. If you want to do something with the result, make the new request as an await aswell. Thats it. If you have this response, take it and lambda or foreach it. The last step is, check what you got and return it. It makes no sense to "await" something when you make "promises" (said in javascript)