reactjs - ステートレス コンポーネントから条件内の別のコンポーネントを返す方法

Question

このステートレス コンポーネントは、クラス コンポーネントの render メソッド内でレンダリングされています。このステートレス コンポーネントは、条件に基づいて null または別のクラス コンポーネントを返しますが、エラーが発生します。

const AdminTools = () => { 
        const userID = auth.currentUser;
        let userRef = firebase.database().ref("users");
        if(userID){
            userRef.child(userID.uid).once('child_added', snap => {
                if(snap.val().role == 'Admin'){
                    return <AdminPanel/>
                        } else {
                      return null     
                        }
            });
        }
    }

エラー：

render から何も返されませんでした。これは通常、return ステートメントが欠落していることを意味します。または、何もレンダリングしない場合は、null を返します。

条件の結果として何かを返すにはどうすればよいですか? このように変数を宣言しようとしましたが、同じエラーです。

const AdminTools = () => { 
        let res;
        const userID = auth.currentUser;
        let userRef = firebase.database().ref("users");
        if(userID){
            userRef.child(userID.uid).once('child_added', snap => {
                if(snap.val().role == 'Admin'){
                    res =  <AdminPanel/>
                        } else {
                    res = null     
                        }
            });
        }
           return res;
    }