Next.js TypeScript中React Context存Auth0用户对象报错

你遇到的报错其实来自Auth0的useUser钩子，而非你自定义的UserProvider。原因是：Auth0的useUser要求应用必须先包裹它官方提供的UserProvider，但你的代码里只包裹了自己实现的UserProvider，缺少了Auth0的那一层。

解决步骤 #

1. 调整应用的Provider层级 #

在_app.tsx（Pages Router）或layout.tsx（App Router）中，先包裹Auth0的官方UserProvider，再嵌套你自己的UserProvider：

如果你用的是Pages Router（_app.tsx）

import { AppProps } from "next/app";
import "../styles/globals.css";
// 重命名Auth0的Provider避免和自定义的冲突
import { UserProvider as Auth0UserProvider } from "@auth0/nextjs-auth0/client";
import { UserProvider } from "@src/components/common/userContext";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Auth0UserProvider>
      <UserProvider>
        <Component {...pageProps} />
      </UserProvider>
    </Auth0UserProvider>
  );
}

如果你用的是App Router（app/layout.tsx）

注意：App Router下_app.tsx不再生效，必须在根布局中配置：

import { UserProvider as Auth0UserProvider } from "@auth0/nextjs-auth0/client";
import { UserProvider } from "@src/components/common/userContext";
import "../styles/globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <Auth0UserProvider>
          <UserProvider>{children}</UserProvider>
        </Auth0UserProvider>
      </body>
    </html>
  );
}

2. 优化自定义Context的钩子（可选） #

为了避免混淆报错来源，可以给useUserContext添加校验，确保它在自定义的UserProvider范围内使用：

// userContext.tsx
export const useUserContext = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error("useUserContext 必须在 UserProvider 内部使用");
  }
  return context;
};

这样如果是自己的Provider没包裹，会抛出明确的自定义错误，不会和Auth0的报错混淆。

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