Javascript 使用Firebase自定义声明在React Native中有条件地呈现UI

我目前正在用firebase构建一个react原生项目，我想使用自定义声明有条件地呈现导航器。 查看firebase文档，他们给出的示例如下：

firebase.auth().currentUser.getIdTokenResult()
  .then((idTokenResult) => {
     // Confirm the user is an Admin.
     if (!!idTokenResult.claims.admin) {
       // Show admin UI.
       showAdminUI();
     } else {
       // Show regular user UI.
       showRegularUI();
     }
  })
  .catch((error) => {
    console.log(error);
  });

因此，尝试将其转换为react native这是我想到的：

export default function UINav () {
return firebase
    .auth()
    .currentUser.getIdTokenResult()
    .then((tokenResult) => {
      if (tokenResult.claims.admin) {
        return (
          <NavigationContainer>
            <Stack.Navigator
              mode="modal"
            >
              <Stack.Screen
                name="Admin"
                component={AdminNavigator}
              />
            </Stack.Navigator>
          </NavigationContainer>
        )
      } else {
        return (
          <NavigationContainer>
            <Stack.Navigator
              mode="modal"
            >
              <>
                <Stack.Screen
                  name="User"
                  component={UserNavigator}
                />
              </>
            </Stack.Navigator>
          </NavigationContainer>
        )
      }
    })

}

导出默认函数UINav（）{
返回火基
.auth（）
.currentUser.getIdTokenResult（）
。然后（（令牌结果）=>{
if（tokenResult.claims.admin）{
返回(
)
}否则{
返回(
)
}
})
}

我得到的错误是：

错误：对象作为React子对象无效（找到：具有键{U U，{U V，{U W，{U X}的对象）。如果要呈现子对象集合，请改用数组

任何帮助都将不胜感激：）

试着这样做

const Display = () => {
  const [toDisplay, setToDisplay] = useState(
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <>
          <Stack.Screen name="User" component={UserNavigator} />
        </>
      </Stack.Navigator>
    </NavigationContainer>,
  );
  useEffect(() => {
    firebase
      .auth()
      .currentUser.getIdTokenResult()
      .then((tokenResult) => {
        if (tokenResult.claims.admin) {
          setToDisplay(
            <NavigationContainer>
              <Stack.Navigator mode="modal">
                <Stack.Screen name="Admin" component={AdminNavigator} />
              </Stack.Navigator>
            </NavigationContainer>,
          );
        }
      });
  }, []);

  return toDisplay;
};

export default function UINav() {
  return <Display />;
}

常量显示=（）=>{
const[toDisplay，setToDisplay]=useState(
,
);
useffect（（）=>{
火基
.auth（）
.currentUser.getIdTokenResult（）
。然后（（令牌结果）=>{
if（tokenResult.claims.admin）{
设置显示(
,
);
}
});
}, []);
返回显示；
};
导出默认函数UINav（）{
返回；
}

不要忘记从React导入useEffect和useState