CODEWITHSUNDEEP
javascripttypescriptnextjs-dynamic-routingdynamic-routingnext.js15
Wania Mirza
Wania Mirza

Reputation: 1

Next.js Dynamic Route Type Error in searchParams when Fetching Data for Client Component

After creating a dynamic route [id] it contains 2 pages, a server side component where the error is and a client side PolicyVerificationClient.tsx which takes the params Certificatenumber and 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} />;
}

I keep getting a type error: Type 'Props' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type '{ [key: string]: string | string[] | undefined; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

I tried this but it did not fix the problem searchParams: Promise<{ [key: string]: string | string[] | undefined }>; // Updated to be a Promise

Upvotes: 0

Views: 109

Answers (1)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18153

According to the documentation, searchParams should be a promise :

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

If you don't use seachParams in your page component, you can just remove it

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

Upvotes: 1

Related Questions