Next.js中useSession报错：TypeError: useSession不是函数

核心原因 #

1. 组件类型不匹配：Next.js 15默认创建的是服务器组件，而useSession是客户端专属Hook，无法在服务器组件中直接调用，这是导致运行时类型错误的主要原因。
2. NextAuth v5 Beta版本API变更：v5对客户端API做了重构，同时要求必须通过SessionProvider在根布局中包裹应用，否则客户端Hook无法正常工作。

修复步骤 #

1. 将组件标记为客户端组件 #

在组件文件最顶部添加'use client'指令，明确告知Next.js这是一个客户端组件：

'use client';

import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import ConcordGlobe from '../concord-globe';
import { PowerIcon } from '@heroicons/react/24/outline';
import { signOut } from '@/auth';
import { ShieldExclamationIcon } from '@heroicons/react/20/solid';
import { useSession } from 'next-auth/react'

export default function Servers() {
  const { data: session } = useSession();

  // 剩余组件代码不变
}

2. 配置根布局的SessionProvider #

在app/layout.tsx中导入并使用SessionProvider包裹整个应用，确保客户端Hook能获取到会话上下文：

import { SessionProvider } from "next-auth/react";

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

3. 验证Auth配置文件 #

确保你的app/auth.ts（或自定义路径的Auth配置文件）符合NextAuth v5的格式，例如：

import NextAuth from "next-auth";
// 根据你的登录提供商导入对应Provider
import GitHub from "next-auth/providers/github";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  // 其他自定义配置（如回调、会话策略等）
});

4. 清除缓存并重启服务 #

执行以下命令清除Next.js缓存并重启开发服务器，避免缓存导致的依赖问题：

pnpm run dev --clear-cache

额外排查点 #

• 确认next-auth版本为5.0.0-beta.19，无版本冲突：查看package.json中的依赖版本，执行pnpm list next-auth验证。
• 无需单独安装@types/next-auth：NextAuth v5自带类型定义，安装额外的类型包可能导致冲突，可卸载该包：pnpm remove @types/next-auth。

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