如何修复Next.js TypeScript API路由中的'params is not a valid type'错误？

问题描述 #

部署项目到Vercel时收到如下类型错误，本地开发环境无报错且运行正常：

app/api/invoice/markAsPaid/[invoiceId]/route.ts
Type error: Route "app/api/invoice/markAsPaid/[invoiceId]/route.ts" has an invalid "PATCH" export:
Type "{ params: { invoiceId: string; }; }" is not a valid type for the function's second argument

相关代码：

"use server";

import { NextRequest, NextResponse } from "next/server";
import prisma from "@/app/utils/db";
import { requireUser } from "@/app/utils/hooks";

// PATCH function to mark invoice as PAID
export async function PATCH(
  request: NextRequest,
  context: { params: { invoiceId: string } } // Typing context correctly
) {
  // @ts-ignore: Ignore TypeScript error for params typing
  const { invoiceId } = context.params;  // Get the invoiceId from the context params

  try {
    const session = await requireUser();
    if (!session?.user?.id) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }

    // Update the invoice status to "PAID"
    const updatedInvoice = await prisma.invoice.update({
      where: { id: invoiceId },
      data: { status: "PAID" },
    });

    return NextResponse.json({ success: true, invoice: updatedInvoice });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

问题原因 #

本地开发时用@ts-ignore掩盖了类型不匹配的问题，而Vercel构建时的TypeScript检查更严格。自定义的context类型不符合Next.js App Router路由处理函数的官方类型定义，导致部署时类型校验失败。

解决方案 #

步骤1：导入官方参数类型 #

从next/server导入Params类型，用它来规范路由参数的类型定义。

步骤2：修正上下文类型并移除忽略注释 #

替换自定义的context类型，移除@ts-ignore注释，确保类型完全匹配官方规范。

修改后的完整代码 #

"use server";

import { NextRequest, NextResponse, type Params } from "next/server";
import prisma from "@/app/utils/db";
import { requireUser } from "@/app/utils/hooks";

export async function PATCH(
  request: NextRequest,
  { params }: { params: Params<{ invoiceId: string }> }
) {
  const { invoiceId } = params;

  try {
    const session = await requireUser();
    if (!session?.user?.id) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }

    const updatedInvoice = await prisma.invoice.update({
      where: { id: invoiceId },
      data: { status: "PAID" },
    });

    return NextResponse.json({ success: true, invoice: updatedInvoice });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

额外检查 #

确保本地开发依赖的Next.js版本与Vercel部署环境使用的版本一致，避免因版本差异导致的类型定义不一致问题。

内容的提问来源于stack exchange，提问作者Syed Laeeq Ahmed