如何在响应中启动依赖于异步调用的侦听器？

Question

我正在使用Firebase和React。在auth更改（包括第一次加载）时，将加载用户数据。

fetchUser: () => new Promise((resolve, reject) => {
    const unsub = firebaseAuth.onAuthStateChanged((user) => {
      unsub();
      resolve(user);
    }, (error) => {
        reject(error);
    });
}),

某些菜单取决于用户角色，用户可以切换角色。

firebaseDb.ref("settings").child(uid).child("role").on('value', snap =>{
    this.setState({role: snap.val()});
});

我仅在render方法（componentDidMount user undefined）中获取用户数据，我无法启动任何函数调用，因为这会触发无限循环（React多次调用render）。我也无法为用户的呼叫数据调用添加角色调用，因为它不会更改身份验证，即不会触发onAuthStateChanged，因此需要更改的UI元素不会因为用户正在切换角色。

如何根据异步调用启动此角色侦听器？