Facing some compatibility Error with PageProps and SearchParamProps

[vijayluxmimaddheshiya]

Summary

Error -
Type 'SearchParamProps' does not satisfy the constraint 'PageProps'.
Types of property 'searchParams' are incompatible.
Type '{ [key: string]: string | string[] | Promise; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]ts(2344)

This is my page.ts file -
// File: C:\Users\VIJAY LAXMI\OneDrive\Desktop\Evently\my-app\app(root)\events[id]\update\page.tsx
import * as entry from '../../../../../../../app/(root)/events/[id]/update/page.js'
import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'

type TEntry = typeof import('../../../../../../../app/(root)/events/[id]/update/page.js')

type SegmentParams = T extends Record<string, any>
? { [K in keyof T]: T[K] extends string ? string | string[] | undefined : never }
: T

// Check that the entry is a valid entry
checkFields<Diff<{
default: Function
config?: {}
generateStaticParams?: Function
revalidate?: RevalidateRange | false
dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
dynamicParams?: boolean
fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache'
preferredRegion?: 'auto' | 'global' | 'home' | string | string[]
runtime?: 'nodejs' | 'experimental-edge' | 'edge'
maxDuration?: number

metadata?: any
generateMetadata?: Function
viewport?: any
generateViewport?: Function
experimental_ppr?: boolean

}, TEntry, ''>>()

// Check the prop type of the entry function
checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()

// Check the arguments and return type of the generateMetadata function
if ('generateMetadata' in entry) {
checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
}

// Check the arguments and return type of the generateViewport function
if ('generateViewport' in entry) {
checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
checkFields<Diff<ResolvingViewport, SecondArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
}

// Check the arguments and return type of the generateStaticParams function
if ('generateStaticParams' in entry) {
checkFields<Diff<{ params: SegmentParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
checkFields<Diff<{ tag: 'generateStaticParams', return_type: any[] | Promise<any[]> }, { tag: 'generateStaticParams', return_type: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>()
}

export interface PageProps {
params?: Promise
searchParams?: Promise

}
export interface LayoutProps {
children?: React.ReactNode

params?: Promise
}

// =============
// Utility types
type RevalidateRange = T extends { revalidate: any } ? NonNegative<T['revalidate']> : never

// If T is unknown or any, it will be an empty {} type. Otherwise, it will be the same as Omit<T, keyof Base>.
type OmitWithTag<T, K extends keyof any, _M> = Omit<T, K>
type Diff<Base, T extends Base, Message extends string = ''> = 0 extends (1 & T) ? {} : OmitWithTag<T, keyof Base, Message>

type FirstArg = T extends (...args: [infer T, any]) => any ? unknown extends T ? any : T : never
type SecondArg = T extends (...args: [any, infer T]) => any ? unknown extends T ? any : T : never
type MaybeField<T, K extends string> = T extends { [k in K]: infer G } ? G extends Function ? G : never : never

function checkFields<_ extends { [k in keyof any]: never }>() {}

// https://github.com/sindresorhus/type-fest
type Numeric = number | bigint
type Zero = 0 | 0n
type Negative = T extends Zero ? never : ${T} extends -${string} ? T : never
type NonNegative = T extends Zero ? T : Negative extends never ? T : 'invalid_negative_number'

this is my page.tsx file -

import CheckoutButton from '@/components/shared/CheckoutButton';
import Collection from '@/components/shared/Collection';
import { getEventById, getRelatedEventsByCategory } from '@/lib/actions/event.actions'
import { formatDateTime } from '@/lib/utils';
import { SearchParamProps } from '@/types'
import Image from 'next/image';

const EventDetails = async ({ params: { id }, searchParams }: SearchParamProps) => {
const event = await getEventById(id);

const relatedEvents = await getRelatedEventsByCategory({
categoryId: event.category._id,
eventId: event._id,
page: searchParams.page as string,
})

return (
<>

    <div className="flex w-full flex-col gap-8 p-5 md:p-10">
      <div className="flex flex-col gap-6">
        <h2 className='h2-bold'>{event.title}</h2>

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
          <div className="flex gap-3">
            <p className="p-bold-20 rounded-full bg-green-500/10 px-5 py-2 text-green-700">
              {event.isFree ? 'FREE' : `$${event.price}`}
            </p>
            <p className="p-medium-16 rounded-full bg-grey-500/10 px-4 py-2.5 text-grey-500">
              {event.category.name}
            </p>
          </div>

          <p className="p-medium-18 ml-2 mt-2 sm:mt-0">
            by{' '}
            <span className="text-primary-500">{event.organizer.firstName} {event.organizer.lastName}</span>
          </p>
        </div>
      </div>

      <CheckoutButton event={event} />

      <div className="flex flex-col gap-5">
        <div className='flex gap-2 md:gap-3'>
          <Image src="/assets/icons/calendar.svg" alt="calendar" width={32} height={32} />
          <div className="p-medium-16 lg:p-regular-20 flex flex-wrap items-center">
            <p>
              {formatDateTime(event.startDateTime).dateOnly} - {' '}
              {formatDateTime(event.startDateTime).timeOnly}
            </p>
            <p>
              {formatDateTime(event.endDateTime).dateOnly} -  {' '}
              {formatDateTime(event.endDateTime).timeOnly}
            </p>
          </div>
        </div>

        <div className="p-regular-20 flex items-center gap-3">
          <Image src="/assets/icons/location.svg" alt="location" width={32} height={32} />
          <p className="p-medium-16 lg:p-regular-20">{event.location}</p>
        </div>
      </div>

      <div className="flex flex-col gap-2">
        <p className="p-bold-20 text-grey-600">What You'll Learn:</p>
        <p className="p-medium-16 lg:p-regular-18">{event.description}</p>
        <p className="p-medium-16 lg:p-regular-18 truncate text-primary-500 underline">{event.url}</p>
      </div>
    </div>
  </div>
</section>

{/* EVENTS with the same category */}
<section className="wrapper my-8 flex flex-col gap-8 md:gap-12">
  <h2 className="h2-bold">Related Events</h2>

  <Collection 
      data={relatedEvents?.data}
      emptyTitle="No Events Found"
      emptyStateSubtext="Come back later"
      collectionType="All_Events"
      limit={3}
      page={searchParams.page as string}
      totalPages={relatedEvents?.totalPages}
    />
</section>
</>

)
}

export default EventDetails

I tried to change and wrap in promise as well but it is not working and my code is failing while deploying the application , kindly help.

Additional information

No response

Example

No response

[icyJoseph]

Do this:

const EventDetails = async ({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) => {

Make sure that works, and then update your own SearchParamProps definition.

[Pushpraj733]

this is my searchParamProps in @types :
export type SearchParamProps = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
};

And this is my page.tsx whuch is in [id]->page.tsx,
const EventDetails = async ({ params: { id }, searchParams }: SearchParamProps) => {
const event = await getEventById(id);

const relatedEvents = await getRelatedEventsByCategory({
categoryId: event.category._id,
eventId: event._id,
page: searchParams.page as string,
})
//other code
Please have look on this .
Error says :
type error: Type 'SearchParamProps' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

[icyJoseph]

Did you fix it? It was exactly the same fix, oddly. Don't forget to await the params and search params.

[Pushpraj733]

Can you Please fix the code .i have tried everything but not able to fix code .

[icyJoseph]

The OP to this thread did the updates here,

• https://github.com/vijayluxmimaddheshiya/Event_Hub_IGDTUW/blob/main/app%2F%28root%29%2Fevents%2F%5Bid%5D%2Fpage.tsx

• https://github.com/vijayluxmimaddheshiya/Event_Hub_IGDTUW/blob/main/types%2Findex.ts#L145-L149

Is this part of a course? Oddly similar issue. It has to be fixed in various places if I remember correctly.

[vijayluxmimaddheshiya]

Thank you so much. It worked.

…

On Wed, 20 Nov 2024 at 00:15, Joseph ***@***.***> wrote: Do this: const EventDetails = async ({ params, searchParams,}: { params: Promise<{ id: string }> searchParams: Promise<{ [key: string]: string | string[] | undefined }>}) => { Make sure that works, and then update your own SearchParamProps definition. — Reply to this email directly, view it on GitHub <#72968 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXFLVP2XCOSJBQBJYQ7ATJT2BOBLXAVCNFSM6AAAAABSCZBTD2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZQHE4TOOI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[icyJoseph]

Nice. Please don't forget to mark as answered!

[Pushpraj733]

No ,i have tried everything but nothing worked.

…

On Wed, 25 Dec, 2024, 1:25 am Joseph, ***@***.***> wrote: Did you fix it? It was exactly the same fix, oddly. Don't forget to await the params and search params. — Reply to this email directly, view it on GitHub <#72968 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3J6VD22XHGX64UVMD4Q3AL2HG34LAVCNFSM6AAAAABSCZBTD2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNRWGAYDCMY> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[Pushpraj733]

It worked.Thank you so much brother.It Is a Part of a nextJs Project on youtube .i am about to submit it in my current semester.

…

On Wed, Dec 25, 2024 at 2:38 AM Joseph ***@***.***> wrote: The OP to this thread did the updates here, https://github.com/vijayluxmimaddheshiya/Event_Hub_IGDTUW/blob/main/app%2F%28root%29%2Fevents%2F%5Bid%5D%2Fpage.tsx Is this part of a course? Oddly similar issue. — Reply to this email directly, view it on GitHub <#72968 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3J6VD5FGSQ5SV27B5HGO5T2HHEN7AVCNFSM6AAAAABSCZBTD2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNRWGAZDGNQ> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>