Next.js15路由类型错误：参数对象不满足PageProps约束

问题原因 #

Next.js 14+（含15）的App Router对页面组件的props类型约束更严格，页面组件的props必须符合官方定义的PageProps接口——该接口包含params和可选的searchParams字段。你之前自定义的{ params: { service: string; }; }类型缺少searchParams字段，因此触发类型不匹配错误。

解决方案 #

步骤1：导入官方PageProps类型 #

修改导入语句，添加PageProps的导入：

import HeadingSection from "@/components/heading/HeadingSection"
import ServicePage from "@/components/services/ServicePage"
import { designData } from "@/data/designData"
import { developmentData } from "@/data/developmentData"
import { seoData } from "@/data/seoData"
import { supportData } from "@/data/supportData"
import type { Metadata, PageProps } from "next" // 新增PageProps导入

步骤2：调整参数类型并处理params #

将组件和generateMetadata的参数类型替换为PageProps，并通过类型断言获取确定存在的service参数：

修改generateMetadata函数：

export function generateMetadata({ params }: PageProps): Metadata {
  const { service } = params as { service: string };
  const serviceData = serviceDataMap[service as keyof typeof serviceDataMap];

  if (!serviceData) {
    return {
      title: "Hello world",
      description: "None",
      alternates: {
        canonical: "https://info.com/services",
      },
    };
  }

  return {
    title: serviceData.metaTitle,
    description: serviceData.description,
    alternates: {
      canonical: serviceData.canonical,
    },
  };
}

修改页面组件：

const ServiceDynamicPage = ({ params }: PageProps) => {
  const { service } = params as { service: string };
  const serviceData = serviceDataMap[service as keyof typeof serviceDataMap];

  if (!serviceData) {
    return <p>Not find</p>;
  }

  return (
    <>
      <HeadingSection title={serviceData.pageTitle} description={serviceData.description} />
      <ServicePage
        title={serviceData.pageTitle}
        description={serviceData.description}
        sectionsData={serviceData.sectionsData}
        canonical={serviceData.canonical}
      />
    </>
  );
};

export default ServiceDynamicPage;

可选：更严谨的自定义类型 #

如果想要进一步约束service的有效值，可以创建扩展PageProps的自定义类型：

type ServicePageProps = PageProps & {
  params: {
    service: keyof typeof serviceDataMap;
  };
};

之后直接用该类型定义参数，无需额外断言service的类型：

export function generateMetadata({ params }: ServicePageProps): Metadata {
  const serviceData = serviceDataMap[params.service];
  // ... 其余代码
}

const ServiceDynamicPage = ({ params }: ServicePageProps) => {
  const serviceData = serviceDataMap[params.service];
  // ... 其余代码
};

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