next.js - Dynamic Route TypeScript Error: params type missing Promise properties - Stack Overflow

admin管理员组

文章数量:1319953

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

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

• next.js
• vercel

Share Improve this question Follow edited Jan 20 at 5:54 DarkBee 15.6k88 gold badges7272 silver badges117117 bronze badges asked Jan 19 at 22:35 ripyoripyo 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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./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!

本文标签： nextjsDynamic Route TypeScript Error params type missing Promise propertiesStack Overflow