Next.js 13.2：带通配段的类型安全API路由处理器实现疑问

要处理http://localhost:3000/api/12/24/test这类通配路径并实现类型安全，你需要按以下步骤操作：

1. 正确创建路由文件结构 #

在/app/api目录下创建[...id]/route.ts文件（[...id]是Next.js的通配动态路由语法，用于捕获路径中所有后续的Slug段）。

2. 问题根源解析 #

你最初的代码输出undefined，是因为错误地定义了参数接口并尝试解构单个属性——Next.js会将通配路径的所有片段存入params.id数组，而非单独的属性字段。后续直接使用params.id时，所有元素默认都是字符串，因此需要手动做类型转换与验证来实现类型安全。

3. 类型安全的实现代码 #

以下是完整的路由处理代码，包含类型守卫、运行时验证和类型转换：

import { NextResponse } from 'next/server';

// 类型守卫：验证字符串是否能转换为有效数字
function isNumericString(value: string): value is `${number}` {
  return !isNaN(Number(value)) && !isNaN(parseFloat(value));
}

export async function GET(
  request: Request,
  { params }: { params: { id: string[] } }
) {
  // 从数组中提取对应位置的参数片段
  const [num1Str, num2Str, str] = params.id;

  // 1. 验证参数数量是否符合要求
  if (!num1Str || !num2Str || !str) {
    return NextResponse.json(
      { error: '需要提供3个参数：数字1、数字2、字符串' },
      { status: 400 }
    );
  }

  // 2. 验证前两个参数是否为有效数字字符串
  if (!isNumericString(num1Str) || !isNumericString(num2Str)) {
    return NextResponse.json(
      { error: '前两个参数必须是有效数字' },
      { status: 400 }
    );
  }

  // 3. 类型转换：此时num1和num2会被TypeScript识别为number类型
  const num1 = Number(num1Str);
  const num2 = Number(num2Str);

  // 类型安全地使用参数
  console.log(`Number 1: ${num1} Number 2: ${num2} String: ${str}`);

  return NextResponse.json({ num1, num2, str });
}

4. 关键细节说明 #

• 通配路由语法：[...id]会将路径中/api/之后的所有片段（如12、24、test）收集到params.id数组中。
• 类型守卫的作用：isNumericString不仅在运行时验证字符串是否可转换为数字，还会在编译时告知TypeScript：通过验证的字符串可以安全转换为number类型，实现类型安全。
• 运行时验证：避免用户传入无效参数（如非数字字符串）导致程序出错，同时返回清晰的错误提示。

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