Next.js _app.tsx的useEffect调用自定义useUser hook报Invalid hook call错误

Invalid hook call报错触发的核心原因是违反了React官方约定的Hook调用规则：

• 所有Hook（包括自定义Hook）只能在React函数组件的最顶层作用域调用，禁止在useEffect回调、循环、条件分支、普通函数内部调用Hook
• 你的代码中将自定义HookuseUser放在了useEffect的回调函数中执行，因此触发了规则校验报错

调整Hook调用的位置即可，具体步骤如下：

1. 将useUser的调用逻辑移到MyApp组件的顶层作用域，提前获取mutateUser方法
2. 将获取到的mutateUser加入useEffect的依赖数组，保证引用一致性
3. 原有登录请求逻辑保留在useEffect内部，直接调用提前获取的mutateUser方法即可

function MyApp({ Component, pageProps }) {
    // useUser移到组件顶层调用
    const { mutateUser } = useUser({
      redirectTo: "/test",
      redirectIfFound: true,
    });

    useEffect(() => {
        const params = {
          p1: "someText",
          m1: "someText02",
        };
    
        try {
          const fetchUser = async () => {
            mutateUser(
              await fetchJson("/api/login", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(params),
              })
            );
          };
          window && fetchUser();
        } catch (error) {
          console.error("An unexpected error happened:", error);
        }
      }, [mutateUser]); // 加入mutateUser作为依赖

    return <Component {...pageProps} />
}

如果存在需要满足特定条件才执行useUser内部逻辑的场景，可以在useUser内部通过SWR的enabled参数控制请求是否发起，不要将useUser本身包裹在条件判断中执行，避免再次触发Hook规则校验报错。

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