"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:

1. Checked tsconfig.json settings (strict mode enabled):

   { "compilerOptions": { "strict": true, "moduleResolution": "node", "skipLibCheck": true } }

2. 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

Answer 1

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
}

Answer 2

​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.