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

Question

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

Olivier Boissé · Accepted Answer · 2024-12-18 14:26:57Z

1

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 }>
};

answered Dec 18, 2024 at 14:26

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Collierton · Accepted Answer · 2025-04-25 16:51:25Z

0

I lost hours to this, even with the help of ChatGPT. Here is the solution for what ultimately worked -- with "folder" a name that can be changed to whatever you need:

interfaceinterface MessagePageProps {
  searchParams: Promise<{ folder: string }>;
}

export default async function MessagesPage(props: MessagePageProps) {
  const { folder } = await props.searchParams;
  return (
     <di><h1> Folder: {folder} </h1></div>
  );
}

answered Apr 25 at 16:51

Collierton

5495 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related