"Next.js TypeScript error: 'param_type.params' incompatible with 'ParamCheck<RouteContext>' during build"

Question

I am working on a Next.js project with TypeScript and Prisma. When running npm run build, the build fails with the following error:

Type error: Type '{ __tag__: "GET"; __param_position__: "second"; __param_type__: { params: { id: string; }; }; }' does not satisfy the constraint 'ParamCheck<RouteContext>'.
The types of '__param_type__.params' are incompatible between these types.
Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

Error Context: File causing issue: route.ts in app/api/projects/[id]. Relevant Code: Here’s the snippet of the GET handler that seems to cause the issue:

import { NextResponse } from "next/server";

import { prisma } from "@/lib/prisma";

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    const project = await prisma.project.findUnique({
      where: { id: params.id },
    });

    if (!project) {
      return NextResponse.json({ error: "Project not found" }, { status: 404 });
    }

    return NextResponse.json(project);
  } catch (error) {
    console.error("Error fetching project:", error);
    return NextResponse.json({ error: "Failed to fetch project" }, { status: 500 });
  }
}

What I’ve Tried:

Checked tsconfig.json settings (strict mode enabled):

{ "compilerOptions": { "strict": true, "moduleResolution": "node", "skipLibCheck": true } }
Reinstalled node_modules and regenerated Prisma client: **

rm -rf node_modules package-lock.json npm install npx prisma generate

** Project Versions: Next.js: 15.1.2 Prisma: 6.2.1 TypeScript: 5.x

BrokenDetector · Accepted Answer · 2025-01-20 11:03:40Z

4

You're getting this error because in Next.js 15, params is actually a Promise that needs to be awaited. Here is how you can fix this:

export async function GET(
  request: Request,
  {params}: { params: Promise<{ id: string }> }
) {
  const id = await params.id
  // rest of your code
}

edited Jan 20 at 11:03

answered Jan 20 at 10:53

BrokenDetector

2111 silver badge5 bronze badges

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

Comments

yabibal eshetie · Accepted Answer · 2025-03-22 09:32:10Z

In Next.js 15, there was a significant change in how route parameters (params) are handled in asynchronous components and functions. Previously, in versions like Next.js 14, params were accessed synchronously. However, starting from Next.js 15, params are now returned as a Promise, aligning with the framework's enhanced asynchronous data fetching capabilities. Medium

Understanding the Issue:

When upgrading to Next.js 15, developers might encounter a TypeScript error in their API routes similar to:

Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

This error arises because the params object, which was previously synchronous, is now asynchronous and returns a Promise. If the code does not account for this change by awaiting the params object, TypeScript will raise a type incompatibility error.

To resolve this issue, you need to update your API route handlers to handle params as a Promise. Here's how you can modify your code:

export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> } // Note the Promise type
) {
  try {
    const { id } = await params; // Await the params to resolve the Promise

By updating your code to treat params as a Promise, you can adapt to the changes introduced in Next.js 15 without the need for additional packages or complex modifications.

travelhawk · Accepted Answer · 2025-02-11 10:48:28Z

1

While the former's explaination is correct, the code still has a mistake since it needs to be awaited on params before accessing the attribute.

export async function GET(
  request: Request,
  {params}: { params: Promise<{ id: string }> }
) {
  const id = (await params).id
  // rest of your code
}

answered Feb 11 at 10:48

travelhawk

1446 bronze badges

Collectives™ on Stack Overflow

"Next.js TypeScript error: 'param_type.params' incompatible with 'ParamCheck<RouteContext>' during build"

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related