Next.js 14中动态页面props的TypeScript类型如何定义？

Next.js 14（App Router）提供了内置的TypeScript类型来替代any，用于定义动态路由页面的params参数，无需手动从零构建类型。

核心用法步骤 #

1. 导入内置的Params类型
   从next/navigation模块导入官方提供的Params泛型类型：

   import type { Params } from 'next/navigation';
   

2. 定义组件的props类型
   结合你的动态路由结构（比如路由为app/products/[id]/page.tsx，params中包含id字段），直接用Params泛型指定参数结构：

   export default async function DetailProduct({ params }: { params: Params<{ id: string }> }) {
       const { imageAddress, title, price } = await getProductByID(params.id);
       return (
           // 页面内容
       );
   }
   

   如果需要复用参数类型，可以先自定义类型再传入泛型：

   type ProductDetailParams = {
       id: string;
   };
   
   export default async function DetailProduct({ params }: { params: Params<ProductDetailParams> }) {
       // ...逻辑代码
   }
   

3. 补充接口返回类型（可选但推荐）
   给getProductByID函数定义返回类型，让解构字段也获得类型提示：

   type Product = {
       imageAddress: string;
       title: string;
       price: number;
   };
   
   async function getProductByID(id: string): Promise<Product> {
       // 你的数据请求逻辑
   }
   

额外说明 #

如果你的页面需要处理URL查询参数，还可以导入next/navigation中的SearchParams类型，组合使用：

import type { Params, SearchParams } from 'next/navigation';

export default async function DetailProduct({ params, searchParams }: { 
    params: Params<{ id: string }>,
    searchParams: SearchParams
}) {
    // 处理params和searchParams
}

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