NextJS动态API路由如何获取参数？context类型疑问

我的API文件结构如下：

app/api/workspaces/[id]/route.js

后端API代码：

export async function GET(req: NextApiRequest) {
  console.log("CATEGORY ID", req.query);
  try {
    // 此处已简化，实际项目中我通过Prisma向Supabase获取数据
    const tasks = [];
    return NextResponse.json(tasks, { status: 200 });
  } catch (err) {
    return NextResponse.json(
      { message: `Could not fetch workspaces: ${err}` },
      { status: 500 },
    );
  }
}

前端调用代码：

const { data: tasks, isLoading: isTasksLoading } = useQuery({
  queryKey: [`tasks-${params.id}`],
  queryFn: async () => {
    const response = await axios.get(`/api/workspaces/${params.id}`);
    return response.data;
  },
});

在route.js中执行console.log(req.query)，结果为undefined，这是什么原因？

更新：后来发现需要通过GET方法的第二个参数获取ID，代码如下：

export async function GET(req, context: any) {
    const { id } = context.params;
}

但不确定context的正确类型是什么？

1. req.query为undefined的原因
   你使用的是Next.js App Router路由模式（app/目录下的route.js），该模式下动态路由参数不会挂载到req.query上——req.query是Pages Router（pages/api/目录）的用法。App Router的动态路由参数必须通过第二个参数context来获取。

2. context的正确类型
   无需使用any，Next.js提供了官方类型定义，有两种常用方式：

• 方式一：导入RouteContext类型

import { NextRequest, NextResponse } from 'next/server';
import type { RouteContext } from 'next/dist/shared/lib/router/router';

export async function GET(req: NextRequest, context: RouteContext) {
  const { id } = context.params;
  console.log('WORKSPACE ID', id);
  
  try {
    // 业务逻辑示例
    const tasks = [];
    return NextResponse.json(tasks, { status: 200 });
  } catch (err) {
    return NextResponse.json(
      { message: `Could not fetch workspaces: ${err}` },
      { status: 500 },
    );
  }
}

• 方式二：直接给params定义类型（更简洁）

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

export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
  const { id } = params;
  // 后续业务逻辑
}

这种方式无需额外导入类型，直接解构并指定params的结构，代码更直观。

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