Next.js+Next-Auth：getServerSideProps中使用useSession读取会话属性遇错

错误原因 #

你在getServerSideProps()里调用useSession()导致报错，因为useSession是React客户端钩子，依赖React上下文（Context）才能工作，但getServerSideProps是独立运行在服务端的函数，不属于React组件树，所以无法访问React上下文，触发了Cannot read properties of null (reading 'useContext')错误。

正确解决方案 #

在服务端获取Next-Auth的Session，需要使用getServerSession方法，而不是客户端的useSession钩子。具体步骤如下：

1. 导入所需依赖 #

首先要导入getServerSession和你的Next-Auth配置（通常在pages/api/auth/[...nextauth].ts文件中定义的authOptions）：

import { getServerSession } from "next-auth/next";
import { authOptions } from "../api/auth/[...nextauth]"; // 注意路径要匹配你的项目结构
import prisma from "../../lib/prisma"; // 你的Prisma客户端实例

2. 修改getServerSideProps函数 #

在服务端函数中通过getServerSession获取用户Session，再用Session中的用户信息过滤数据：

export async function getServerSideProps(context: any) {
  // 在服务端获取Session
  const session = await getServerSession(context.req, context.res, authOptions);

  // 处理用户未登录的情况
  if (!session) {
    return {
      redirect: {
        destination: "/login", // 重定向到登录页
        permanent: false,
      },
    };
  }

  // 用Session中的用户名过滤Segments数据
  const segments = await prisma.segment.findMany({
    where: {
      Heading: session.user.name,
    },
  });

  return {
    props: {
      initialSegments: segments,
      session, // 可选：将Session传递给组件，用于客户端渲染时使用
    },
  };
}

3. 组件中使用传递的props #

在页面组件中接收initialSegments并渲染：

export default function SegmentsPage({ initialSegments, session }: { initialSegments: Segment[], session: any }) {
  return (
    <div>
      <h1>我的Segments数据</h1>
      <ul>
        {initialSegments.map(segment => (
          <li key={segment.id}>{segment.Heading}: {segment.content}</li>
        ))}
      </ul>
    </div>
  );
}

关键注意点 #

• 确保authOptions的导入路径正确，它是Next-Auth的核心配置，包含认证提供者、数据库连接等信息。
• 处理session为空的场景，避免未登录用户访问敏感数据。
• getServerSession需要接收context.req、context.res和authOptions三个参数，缺一不可。

内容的提问来源于stack exchange，提问作者Luka Vilagoš