NextJS中useUserAuthContext导出函数调用时报错：不是函数

问题现象 #

使用自定义的useUserAuthContext钩子时出现报错，初始错误提示：

TypeError: (0 , _context_user_auth_context__WEBPACK_IMPORTED_MODULE_2__.useUserAuthContext) is not a function or its return value is not iterable
    at Home (./src/app/page.js:14:93)
    at stringify (<anonymous>)

后续测试时错误变为：

src\app\page.js (5:30) @ useUserAuthContext
 ⨯ TypeError: (0 , _context_user_auth_context__WEBPACK_IMPORTED_MODULE_2__.useUserAuthContext) is not a function
    at Home (./src/app/page.js:14:93)
    at stringify (<anonymous>)
digest: "1948578294"
  3 |
  4 | export default function Home() {
> 5 |   const a = useUserAuthContext();
    |                              ^

相关代码 #

Context 定义文件（src/app/context/user-auth.context.js） #

"use client";

import { createContext, useContext, useState } from "react";

const UserAuthContext = createContext();

export function UserAuthWrapper({ children }) {
  const [user, setUser] = useState({ name: "test user" });

  return (
    <UserAuthContext.Provider value={[user, setUser]}>
      {children}
    </UserAuthContext.Provider>
  );
}

export function useUserAuthContext() {
  return useContext(UserAuthContext);
}

RootLayout 使用（src/app/layout.js） #

import { Inter } from "next/font/google";
import "./globals.css";
import { UserAuthWrapper } from "./context/user-auth.context";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <UserAuthWrapper>{children}</UserAuthWrapper>
      </body>
    </html>
  );
}

Home 页面调用代码 #

import { useUserAuthContext } from "./context/user-auth.context";

export default function Home() {
  const [user, setUser] = useUserAuthContext();
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>{user.name}</div>
    </main>
  );
}

更新测试后的Home页面代码 #

import Image from "next/image";
import { useUserAuthContext } from "./context/user-auth.context";

export default function Home() {
  const a = useUserAuthContext();
  console.log(a);

  const [user, setUser] = useUserAuthContext();
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>{user.name}</div>
    </main>
  );
}

文件结构 #

src/
├─ app/
│  ├─ context/
│  │  └─ user-auth.context.js
│  ├─ layout.js
│  └─ page.js
├─ globals.css

解决步骤 #

1. 标记Home页面为客户端组件
   在page.js顶部添加"use client";指令，因为App Router中默认组件是服务器组件，无法使用React Hooks：

   "use client";
   
   import { useUserAuthContext } from "./context/user-auth.context";
   
   export default function Home() {
     const [user, setUser] = useUserAuthContext();
     return (
       <main className="flex min-h-screen flex-col items-center justify-between p-24">
         <div>{user.name}</div>
       </main>
     );
   }
   

2. 给Context添加默认值
   避免组件未被Provider包裹时useContext返回undefined，创建Context时传入默认值：

   // 在user-auth.context.js中修改
   const UserAuthContext = createContext([{}, () => {}]);
   

3. 验证文件扩展名
   确保user-auth.context.js的扩展名是.js或.jsx，保证NextJS能正确识别为React文件。

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