NextJS 和 Typescript 中的动态路由

Question

创建动态路由 [id] 后，它包含 2 个页面，一个是错误所在的服务器端组件，另一个是客户端 PolicyVerificationClient.tsx，它采用参数证书编号和 id。

import {
    doc,
    getDoc
} from 'firebase/firestore';
import {
    db
} from '@/lib/firebase';
import PolicyVerificationClient from './PolicyVerificationClient';
type Props = {
    params: Promise < {
        id: string
    } > ;
    searchParams: {
        [key: string]: string
    };
}
export default async function PolicyVerificationPage({
    params
}: Props) {
    const resolvedParams = await params;
    // Fetch initial data on the server
    let certificateNumber = '';
    try {
        const docRef = doc(db, 'records', resolvedParams.id);
        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={resolvedParams.id} initialCertificateNumber={certificateNumber} />;
}

我不断收到类型错误：类型“Props”不满足约束“PageProps”。 属性“searchParams”的类型不兼容。 输入 '{ [key: string]: string |字符串[] |不明确的; }' 缺少类型“Promise”中的以下属性：then、catch、finally、[Symbol.toStringTag]

我尝试了这个，但它没有解决问题 searchParams: Promise<{ [key: string]: string | string[] | undefined }>; // 更新为 Promise

Answer 1

根据文档，

searchParams

应该是一个承诺：

type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }
};

如果您在页面组件中不使用

seachParams

，则可以将其删除

type Props = {
  params: Promise<{ id: string }>
};