React Router V6.5：如何为数据加载器实现强类型？

A. 简化 useLoaderData 的类型断言 #

原生 useLoaderData 返回类型为 unknown，每次使用都手动类型断言确实繁琐。你可以封装一个泛型版本的钩子来替代它：

import { useLoaderData as originalUseLoaderData } from 'react-router-dom';

export function useLoaderData<T>(): T {
  return originalUseLoaderData() as T;
}

之后在组件中直接通过泛型指定类型即可，无需额外断言：

const profil = useLoaderData<TProfil>();

B. 为 Loader 的 Params 添加强类型 #

你不需要把 params 设为 any，可以通过自定义接口结合 React Router 内置类型实现强类型约束：

1. 先定义对应路由参数的类型接口：

interface CareerDetailParams {
  id: string;
}

2. 使用 React Router 提供的 LoaderFunction 泛型来约束 loader 函数：

import type { LoaderFunction } from 'react-router-dom';

const careerDetailDataLoader: LoaderFunction<CareerDetailParams> = async ({ params }) => {
  // params 会被自动推断为 CareerDetailParams 类型，id 拥有明确的 string 类型提示
  const { id } = params;
  const res = await fetch(`http://localhost:4000/careers/${id}`);

  const data: TProfil = await res.json();
  return data;
};

或者也可以直接给函数参数标注类型，效果一致：

const careerDetailDataLoader = async ({ params }: { params: CareerDetailParams }): Promise<TProfil> => {
  const { id } = params;
  // ... 业务逻辑不变
};

这样就能保证 params 与路由定义的 :id 参数强绑定，避免类型模糊带来的潜在问题。

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