TypeScript中searchParams参数的类型如何正确定义？

你报错的核心问题是组件props的类型定义逻辑错误：你把searchParamsProps定义成了直接包含manufacturer等字段的对象，但实际上页面组件的props是一个包含searchParams属性的容器对象，真正的查询参数都在这个searchParams属性里。

另外，URL查询参数有两个必须注意的特性：

• 所有参数值默认都是字符串类型（或undefined，用户未传参时），不能直接定义为number
• 所有参数都是可选的，因此类型里要添加?标记可选性

正确的类型定义与组件代码 #

// 定义URL查询参数的类型：所有字段为可选字符串
type SearchParams = {
  manufacturer?: string;
  model?: string;
  year?: string;
  fuel?: string;
  limit?: string;
};

// 组件props的类型是包含searchParams的对象
export default async function Home({ searchParams }: { searchParams: SearchParams }) {
  // 将字符串参数转换为业务需要的类型，同时设置默认值
  const allCars = await fetchCars({
    manufacturer: searchParams.manufacturer || "",
    model: searchParams.model || "",
    // 把year字符串转为数字，默认2022
    year: searchParams.year ? parseInt(searchParams.year, 10) : 2022,
    fuel: searchParams.fuel || "",
    // 把limit字符串转为数字，默认10
    limit: searchParams.limit ? parseInt(searchParams.limit, 10) : 10,
  });
}

额外优化方案 #

如果你的fetchCars函数已经有明确的参数类型，可以复用它来简化SearchParams的定义，避免重复代码：

// 假设fetchCars的参数类型如下
type FetchCarsParams = {
  manufacturer: string;
  model: string;
  year: number;
  fuel: string;
  limit: number;
};

// 基于FetchCarsParams生成SearchParams类型
type SearchParams = Partial<Record<keyof FetchCarsParams, string>>;

如果使用Next.js App Router，也可以直接用官方提供的PageProps类型：

import type { PageProps } from 'next';

export default async function Home({ searchParams }: PageProps) {
  // 此处searchParams类型为Record<string, string | string[] | undefined>
  // 仍需自行转换类型并设置默认值
}

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