Next.js动态表单页面导入Props时出现类型错误

看起来你遇到的是Next.js App Router页面组件的类型不匹配问题，还有同步组件误用await的小问题，我来帮你一步步解决：

错误原因拆解 #

• Props类型不兼容：你错误地给页面组件的props加上了PageProps约束，但App Router中动态路由页面的params是普通对象，不是Promise类型——错误提示里说你的params缺少Promise的then/catch方法，大概率是你引用了旧的Pages Router的PageProps类型，或者类型定义写错了。
• 不必要的await：你的formMap里的组件是通过import * as form同步导入的，根本不需要用await，这会让TypeScript误以为你在处理Promise类型的组件。

修复后的完整代码 #

首先修改动态页面组件：

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import * as form from "@/components/forms";

// 定义formMap类型，确保键是string，值是React组件类型
const formMap: Record<string, React.ComponentType | undefined> = {
  client: form.ClientForm,
  invoice: form.InvoiceForm,
};

// App Router动态路由页面的props直接定义params即可，不需要PageProps约束
export default function DynamicFormPage({ params }: { params: { type: string } }) {
  // 去掉不必要的await，同时加个判断避免找不到组件的情况
  const FormComponent = formMap[params.type];

  // 如果没有匹配的组件，可以返回错误提示或者默认内容
  if (!FormComponent) {
    return <main className="mx-70 flex flex-col gap-y-15">Invalid form type</main>;
  }

  return (
    <main className="mx-70 flex flex-col gap-y-15">
      <section>
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">Home</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink>New</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>{params.type}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </section>
      <section>
        <FormComponent />
      </section>
    </main>
  );
}

额外的类型安全优化 #

如果你想更严谨，可以给params.type加类型约束，比如定义一个允许的表单类型枚举：

type FormType = "client" | "invoice";

const formMap: Record<FormType, React.ComponentType> = {
  client: form.ClientForm,
  invoice: form.InvoiceForm,
};

// 页面props的params.type也对应枚举类型
export default function DynamicFormPage({ params }: { params: { type: FormType } }) {
  // ...后续代码不变
}

这样就能彻底避免类型错误，同时保证只有指定的表单类型能被访问到。

内容来源于stack exchange