React集成Firebase Auth调用useAuthState报Hook错误解决方案

问题背景 #

使用Firebase实现用户认证功能，预期实现逻辑：用户已登录时展示<Chat />页面，未登录时展示<SignIn />页面，编写代码过程中持续触发Hook错误，已知前置信息：

• 所有import、export相关配置均正常，发帖时移除这部分代码是因为平台文字代码占比要求不满足无法发布。
• 移除const [user] = useAuthState(auth)代码、将条件渲染部分替换为直接渲染<Chat />组件时，页面可以正常展示，无任何报错。

已尝试的实现写法 #

两种写法均触发Hook错误：

1. 直接在JSX中写if判断

...

function App() {

  const user = useAuthState(auth)

  
  return (
    <>
    <Chat />         
    if (user ?) {
      <Chat />
    } else {
      <SignIn />
    }
    </>
  );
}

export default App;

2. 使用三元表达式做条件渲染

...

function App() {

  const user = useAuthState(auth)

  
  return (
    <>
    {user ? <Chat /> : <SignIn />}
    </>
  );
}

export default App;

错误原因与修复方案 #

核心错误点 #

1. Hook返回值接收错误：useAuthState的返回值是结构为[user, loading, error]的数组，代码中未做解构，直接将整个数组赋值给user变量，不符合Hook的API使用规范，是触发Hook错误的核心原因。
2. JSX语法错误：第一种写法直接在JSX子节点位置编写if语句不符合语法规则，JSX内仅支持写入表达式，if/for这类语句不能直接放在JSX结构中，需要包裹在花括号内，或提前写到return逻辑之外。

正确实现代码 #

...

function App() {
  // 正确解构Hook返回值，同时获取加载状态处理初始化场景
  const [user, loading] = useAuthState(auth)

  // 认证状态未加载完成时展示占位内容，避免误判登录状态
  if (loading) return <div>认证状态加载中...</div>
  
  return (
    <>
      {user ? <Chat /> : <SignIn />}
    </>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Jay Estes