调用useAuth函数触发Uncaught TypeError：useAuth不是函数的问题排查

问题描述 #

在Navigation.tsx中调用AuthContext.tsx内的useAuth()函数时，收到错误：Uncaught TypeError: (0 , _contexts_AuthContext__WEBPACK_IMPORTED_MODULE_4__.useAuth) is not a function。已完成以下调试：

• AuthProvider已在layout.tsx中包裹Navigation组件
• useAuth使用命名导出和花括号导入

解决方案 #

1. 为Navigation.tsx添加客户端组件标识

在Next.js App Router中，组件默认是服务器组件，无法使用React Hooks（包括useContext）。而useAuth内部依赖useContext，因此必须将Navigation标记为客户端组件：

修改Navigation.tsx的开头，添加"use client"指令：

"use client"
import React from 'react';
import Link from 'next/link';
import { navCategories } from '../config/navData';
import { useAuth } from '@/contexts/AuthContext';

export default function Navigation() {
    const {isAuthenticated, login, logout} = useAuth();

    // 组件剩余代码...
}

2. 验证路径别名配置

确认@/contexts/AuthContext的路径别名在tsconfig.json或jsconfig.json中正确配置，避免导入错误文件：

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

3. 清除缓存并重启开发服务器

Next.js的缓存可能导致模块导出异常，执行以下步骤：

• 删除项目根目录下的.next文件夹
• 停止当前开发服务器，重新运行npm run dev

4. 检查导出语句是否存在冲突

确认AuthContext.tsx中没有重复导出或默认导出混淆的情况，当前代码的命名导出是正确的，确保没有类似export default useAuth的错误语句。

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