类型错误：“类型 '{ params: { service: string; }; }' 不满足约束 'PageProps'。” (NextJS 15)

Question

我需要帮助我的项目组件。

尝试构建项目时出现错误。下一个JS 15

page.tsx

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 } from "next"


const serviceDataMap = {
  development: developmentData,
  seo: seoData,
  design: designData,
  support: supportData,
};


export function generateMetadata({ params }: { params: { service: string } }): Metadata {
  const serviceData = serviceDataMap[params.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 }: { params: { service: string } }) => {
  const serviceData = serviceDataMap[params.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;

如何修复？

不知道如何修复。

在使用 NextJS13 进行项目工作之前

现在它不能在 NextJS 15 中工作

我尝试使用导出异步功能，但它没有帮助，而且仍然不起作用

Answer 1

在 nextjs 中，15 个参数现在是异步的

你需要像

const service = (await params).service;

一样使用

export async function generateMetadata({ params }: { params: Promise<{ service: string }> }): Metadata {
  const service = (await params).service;
  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,
    },
  };
}

参考链接https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example