NextJS+TypeScript使用Layout时getServerSideProps传参类型报错问题

核心原因 #

类型校验失败是泛型传递链路断裂导致的，TS无法关联getServerSideProps返回值和页面组件的props类型：

• 类型声明文件引入了Next.js不对外暴露的内部路径类型，稳定性无保障；自定义AppPropsWithLayout未透传页面props泛型，默认将所有页面标记为无props类型
• getLayout方法的参数类型定义错误，误用组件类型代替React节点类型，干扰TS推断
• 页面级getLayout的参数类型标注错误，进一步破坏类型匹配逻辑

修复步骤 #

1. 重写next.d.ts类型声明 #

删除内部路径导入，修复泛型透传逻辑，使用官方稳定类型：

import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
import type { ReactNode } from 'react';

declare module 'next' {
    type Page<P = {}, IP = P> = NextPage<P, IP> & {
        getLayout?: (page: ReactNode) => ReactNode;
    }
}

declare module 'next/app' {
    type AppPropsWithLayout<P = {}> = AppProps<P> & {
        Component: Page<P>;
    }
}

2. 清理mui-app.tsx冗余类型 #

删除从Next内部路径导入类型的无用代码，移除多余的硬编码类型标注，核心业务逻辑无需调整，仅保留原有运行逻辑即可，getLayout默认值保持如下写法：

const getLayout = Component.getLayout ?? ((page: ReactNode): ReactNode => page)

3. 修正index.tsx页面类型 #

修改页面内getLayout的参数类型，替换错误的组件类型为ReactNode：

import React, { ReactNode } from "react";
import type { Page } from 'next'
import { PageLayout } from "@app/UI/MUI/components/layout/page-layout";

const page: Page<{ someText: string }> = ({ someText }) => {
    return (
        <div>{someText}</div>
    )
}

page.getLayout = (page: ReactNode) => {
    return (
        <PageLayout>{page}</PageLayout>
    )
}

export const getServerSideProps = async () => {
    return ({ props: { someText: 'This is a test' } })
}

export default page

生效验证 #

所有文件修改完成后重启TS服务（VS Code可通过命令面板执行TypeScript: Restart TS Server），someText的类型波浪线会直接消失，无需再使用any做临时绕过，原有运行逻辑完全不受影响。

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