Next.js动态路由页面Props类型错误：searchParams不兼容PageProps约束

看起来你在Next.js App Router的动态路由页面里踩了Props类型定义的坑，我帮你拆解下问题根源和修复方案：

问题出在哪？ #

你的错误主要来自两个对Next.js App Router页面Props的关键误解：

1. params不是Promise类型：你错误地将params定义为Promise<{ id: string }>，但在App Router中，Server Component页面接收的params是框架已经解析完成的普通对象，完全不需要手动await。
2. searchParams的类型定义完全走偏了：你先是把它限制成了{ [key: string]: string }（忽略了查询参数可能是数组或不存在的情况），后来又错误地改成了Promise类型——这完全不符合Next.js的PageProps规范，因为searchParams本身就是一个同步的键值对对象，和Promise毫无关系。

错误提示里的Type '{ [key: string]: string | string[] | undefined; }' is missing the following properties from type 'Promise'，就是因为你强行把searchParams定义成Promise，但框架实际传入的是普通查询参数对象，两者类型完全不匹配导致的。

修复方案 #

我们需要修正Props的类型定义，同时调整代码中对params的错误使用：

1. 正确定义Props类型

你可以直接复用Next.js内置的PageProps，或者显式定义符合规范的类型（后者更清晰）：

// 方式1：直接用Next.js内置的PageProps
import type { PageProps } from 'next';

// 方式2：显式定义（推荐，更明确）
type Props = {
  params: { id: string }; // 动态路由参数是已解析的普通对象
  searchParams?: { [key: string]: string | string[] | undefined }; // 查询参数的标准类型
};

2. 调整页面组件代码

去掉对params的多余await操作，直接使用params.id即可：

import { doc, getDoc } from 'firebase/firestore';
import { db } from '@/lib/firebase';
import PolicyVerificationClient from './PolicyVerificationClient';
import type { PageProps } from 'next';

// 用显式定义的Props类型也可以
type Props = {
  params: { id: string };
  searchParams?: { [key: string]: string | string[] | undefined };
};

export default async function PolicyVerificationPage({ params }: Props) {
  let certificateNumber = '';
  try {
    const docRef = doc(db, 'records', params.id); // 直接使用params.id，无需await
    const docSnap = await getDoc(docRef);
    if (docSnap.exists()) {
      const data = docSnap.data();
      certificateNumber = data.certificateNumber || '';
    }
  } catch (error) {
    console.error('Error fetching record:', error);
  }
  return <PolicyVerificationClient id={params.id} initialCertificateNumber={certificateNumber} />;
}

为什么这样就能解决问题？ #

• 我们把params的类型修正为普通对象，完全符合Next.js App Router中Server Component页面的参数传递规则。
• searchParams的类型改为框架默认的{ [key: string]: string | string[] | undefined }，和实际传入的参数类型完全匹配，同时标记为可选（不是所有页面都会携带查询参数）。
• 去掉了不必要的await params，因为params本身就是已解析的同步值。

这样修改后，TypeScript的类型检查就能顺利通过，页面也能正常运行了。

备注：内容来源于stack exchange，提问作者Wania Mirza