Next.js中getServerSideProps类型无法传递至NextPage问题求助

问题根源 #

显式为getServerSideProps标注GetServerSideProps类型但未指定泛型时，TypeScript会默认其返回的props类型为{}，导致InferGetServerSidePropsType无法正确提取user的类型信息，进而失去类型补全功能。

方案一：自动推断getServerSideProps类型（推荐） #

移除getServerSideProps的显式类型标注，让TypeScript自动推断其完整类型，这样InferGetServerSidePropsType就能正确识别props中的user类型：

修改后的getServerSideProps代码：

import { GetServerSidePropsContext } from 'next';
import { getServerSession } from 'next-auth/next';
import { authOptions } from '../auth/[...nextauth]'; // 根据实际路径调整
import NextAPIClient from '../path-to-your-api-client'; // 根据实际路径调整
import { TypeUser } from '../path-to-your-type-def'; // 根据实际路径调整

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const session = await getServerSession(ctx.req, ctx.res, authOptions);

  if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  const response = await NextAPIClient.get(`/api/users/by-email/${session.user?.email}`);
  const user: TypeUser = response.data.data; // 注意：若response.data.data非Promise则无需加await

  return {
    props: { user },
  };
};

组件部分保持原有写法即可，此时user会自动获得TypeUser的类型补全：

import { NextPage, InferGetServerSidePropsType } from 'next';
import { getServerSideProps } from './path-to-this-file'; // 根据实际路径调整

const ProjectsPage: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ({ user }) => {
  console.log(user.name); // 现在可获得类型补全
  // ... 其他组件逻辑
};

export default ProjectsPage;

方案二：手动指定getServerSideProps泛型 #

如果希望显式标注类型，可以为GetServerSideProps指定泛型参数，明确props的类型结构：

1. 定义Props类型：

import { TypeUser } from '../path-to-your-type-def';

type ProjectsPageProps = {
  user: TypeUser;
};

2. 修改getServerSideProps的类型标注：

import { GetServerSideProps, GetServerSidePropsContext } from 'next';

export const getServerSideProps: GetServerSideProps<ProjectsPageProps> = async (ctx: GetServerSidePropsContext) => {
  // 原有逻辑不变
  return {
    props: { user }, // TypeScript会自动校验user是否符合TypeUser类型
  };
};

3. 组件直接使用定义好的Props类型：

import { NextPage } from 'next';
import { ProjectsPageProps } from './path-to-your-props-type';

const ProjectsPage: NextPage<ProjectsPageProps> = ({ user }) => {
  console.log(user.name); // 同样可获得类型补全
  // ... 其他组件逻辑
};

额外注意点 #

• 确保TypeUser类型被正确导入到相关文件中
• 检查API响应结构：原代码中await response.data.data可能存在冗余，需根据实际返回数据调整是否需要await

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