Vercel部署Next.js 15时路由API第二个参数类型错误求助

错误信息 #

类型错误：路由“src/app/api/student/[studentId]/route.ts”的“GET”导出无效：类型“{ params: { studentId: string; }; }”不是该函数第二个参数的有效类型。

问题原因 #

在Next.js App Router中，路由函数的context参数必须匹配框架官方定义的类型结构，手动直接声明{ params: { studentId: string } }会和内部类型校验冲突。

修复方案 #

有两种可行的修复方式，按需选择：

方式1：使用官方Params泛型类型

从next/navigation导入官方提供的Params类型，用它约束params的结构，确保类型完全兼容：

import { NextRequest, NextResponse } from 'next/server';
import { Params } from 'next/navigation';

export async function GET(
  req: NextRequest,
  context: { params: Params<{ studentId: string }> }
) {
  const { studentId } = context.params;

  try {
    const student = await prisma.students.findUnique({
      where: { id: parseInt(studentId, 10) },
    });

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

    const formattedStudent = {
      ...student,
      birthDate: student.birthDate ? formatDate(student.birthDate) : null,
      accommodationStart: student.accommodationStart
        ? formatDate(student.accommodationStart)
        : null,
      courseStart: student.courseStart ? formatDate(student.courseStart) : null,
      accommodationEnd: student.accommodationEnd
        ? formatDate(student.accommodationEnd)
        : null,
      courseEnd: student.courseEnd ? formatDate(student.courseEnd) : null,
      arrivalDate: student.arrivalDate ? formatDate(student.arrivalDate) : null,
      departureDate: student.departureDate
        ? formatDate(student.departureDate)
        : null,
    };

    return NextResponse.json(formattedStudent, { status: 200 });
  } catch (error: unknown) {
    console.error(
      "Error fetching student:",
      error instanceof Error ? error.message : error
    );
    return NextResponse.json(
      {
        error: "Failed to fetch student",
        details:
          error instanceof Error ? error.message : "An unknown error occurred",
      },
      { status: 500 }
    );
  }
}

方式2：解构参数并直接指定类型

通过解构context参数，直接给params指定类型，简化代码的同时通过类型校验：

import { NextRequest, NextResponse } from 'next/server';

export async function GET(
  req: NextRequest,
  { params }: { params: { studentId: string } }
) {
  const { studentId } = params;

  // 后续业务逻辑代码保持不变
  try {
    const student = await prisma.students.findUnique({
      where: { id: parseInt(studentId, 10) },
    });

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

    const formattedStudent = {
      ...student,
      birthDate: student.birthDate ? formatDate(student.birthDate) : null,
      accommodationStart: student.accommodationStart
        ? formatDate(student.accommodationStart)
        : null,
      courseStart: student.courseStart ? formatDate(student.courseStart) : null,
      accommodationEnd: student.accommodationEnd
        ? formatDate(student.accommodationEnd)
        : null,
      courseEnd: student.courseEnd ? formatDate(student.courseEnd) : null,
      arrivalDate: student.arrivalDate ? formatDate(student.arrivalDate) : null,
      departureDate: student.departureDate
        ? formatDate(student.departureDate)
        : null,
    };

    return NextResponse.json(formattedStudent, { status: 200 });
  } catch (error: unknown) {
    console.error(
      "Error fetching student:",
      error instanceof Error ? error.message : error
    );
    return NextResponse.json(
      {
        error: "Failed to fetch student",
        details:
          error instanceof Error ? error.message : "An unknown error occurred",
      },
      { status: 500 }
    );
  }
}

说明 #

• 方式1严格遵循Next.js官方类型规范，适合需要明确类型约束的大型项目；
• 方式2代码更简洁，适合快速修复场景，类型校验同样有效。

内容的提问来源于stack exchange，提问作者user23774143