React中自定义useAuth钩子调用useState触发Invalid hook call错误

问题根因排查步骤 #

结合你描述「其他相同写法的钩子可正常运行」的前提，该报错90%概率由useAuth的调用姿势不符合React Hook规则导致，你可以按以下顺序排查：

• 检查useAuth的调用位置：自定义Hook内部使用useState是完全合法的，但useAuth作为自定义Hook，只能在React函数组件的顶层、其他自定义Hook的顶层调用，不能在普通JS函数、类组件、异步回调、useEffect回调内部、条件判断/循环逻辑里调用，否则就会触发无效Hook调用报错。
• 排查项目是否存在多份React副本：执行npm ls react命令校验，如果输出多个版本的react依赖，统一所有依赖的react版本即可解决。
• 确认React版本符合要求：Hook仅支持React 16.8.0及以上版本，低于该版本的React无法识别Hook语法。

针对你当前代码的优化参考 #

你当前代码里声明的[state, setState]没有被实际使用，可以直接删除；如果你后续需要在Hook内存储用户状态，也可以参考以下调整方案：

import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { useState, useEffect } from 'react';

const useAuth = () => {
  const [user, setUser] = useState(null);
  const auth = getAuth();

  // 直接在Hook内监听认证状态，避免每次调用都生成新的Promise
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
    });
    return () => unsubscribe();
  }, [auth]);

  const getUserId = () => {
    return user?.uid ?? null;
  };

  return {
    user,
    getUserId,
  };
};

export default useAuth;

调用示例

// ✅ 正确调用：组件顶层调用
const HomePage = () => {
  const { getUserId } = useAuth();

  const handleClick = () => {
    const uid = getUserId();
    console.log(uid);
  };

  return <button onClick={handleClick}>获取用户ID</button>
}

// ❌ 错误调用：普通函数内调用自定义Hook，会触发报错
const fetchData = async () => {
  const { getUserId } = useAuth();
  const uid = await getUserId();
}

内容的提问来源于stack exchange，提问作者HERO NAX