Dynamic Route TypeScript Error: params type missing Promise properties

Question

I'm encountering a TypeScript error in my Next.js 15.1.3 app with a dynamic route [slug]/page.tsx. The error occurs during build time when deploying to Vercel (works fine locally) and suggests that the params type is expected to be a Promise, but I'm providing a simple string type.

Here's the error I'm getting: Type error: Type 'PageProps' does not satisfy the constraint 'import("/vercel/path0/.next/types/app/(app)/nemovitost/[slug]/page").PageProps'. Types of property 'params' are incompatible. Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

My code:

// app/(app)/nemovitost/[slug]/page.tsx
import { Suspense } from 'react';
import { getPropertyBySlug } from '@/lib/actions';
import { notFound } from 'next/navigation';
import { Featured } from "@/components/featured";
// ... other imports

interface PageProps {
  params: {
    slug: string;
  }
}

export default async function PropertyDetailPage({ params }: PageProps) {
  const property = await getPropertyBySlug(params.slug);

  if (!property) {
    notFound();
  }

  return (
    <>
      <div className='font-geist-sans flex justify-center'>
        <div className="flex-col w-[1100px] mx-4">
          <h1 className="text-blue-800 font-bold">
            {property.title}
          </h1>
          
          {/* Rest of the JSX */}
          
          <Suspense fallback={<LoadingFeatured />}>
            <Featured />
          </Suspense>
        </div>
      </div>
    </>
  );
}

I've tried various approaches including:

Using different type definitions for the params Restructuring the component Adding 'use server' directive Splitting the code into multiple components Creating separate API routes

Nicholas Dullam · Accepted Answer · 2025-01-20 05:53:22Z

2

As noted in the breaking changes for Next.js 15, both page/layout params and searchParams will now be of type Promise<...>. This and other breaking changes can be found here: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page.

For your use case,

interface PageProps {
  params: Promise<{
    slug: string;
  }>
}

export default async function PropertyDetailPage({ params }: PageProps) {
  const { slug } = await params
  const property = await getPropertyBySlug(slug);
  ...
}

should do the trick!

answered Jan 20 at 5:53

Nicholas Dullam

5502 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Dynamic Route TypeScript Error: params type missing Promise properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related