如何为React Router v6的Loader定义返回类型？解决useLoaderData类型未知问题

要解决useLoaderData返回unknown类型的问题，核心是给Loader函数明确指定返回类型，让TypeScript能准确推断数据结构，无需依赖as断言。具体步骤如下：

1. 定义Loader返回的具体类型 #

先创建一个接口（或类型别名），清晰描述Loader返回数据的结构：

// 定义token校验后的响应结构
interface ResetTokenValidationResponse {
  success: boolean;
}

2. 给Loader函数指定返回类型 #

使用react-router-dom提供的LoaderFunction泛型，明确Loader的返回类型。同时修改模拟API的返回类型，从宽泛的object改为我们定义的具体类型：

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

// ... 路由配置部分
{
  path: "/reset-password/:resetToken",
  element: <ResetPassword />,
  // 指定Loader返回类型为 ResetTokenValidationResponse 或 null
  loader: async ({ params }): Promise<ResetTokenValidationResponse | null> => {
    if (!params.resetToken){
      return null;
    }
    const fakeTokens = ["abcdef123456", "bingbong", "foobar"];

    // 修改模拟API的返回类型为具体的Promise<ResetTokenValidationResponse>
    const fakeAPICall = (resetToken: string): Promise<ResetTokenValidationResponse> => {
      if (fakeTokens.includes(resetToken)){
        return Promise.resolve({ success: true });
      }
      return Promise.resolve({ success: false });
    };
    
    const resp = await fakeAPICall(params.resetToken);
    return resp;
  }
},

3. 在组件中给useLoaderData指定泛型 #

在ResetPassword组件里，通过useLoaderData的泛型参数指定返回类型：

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

function ResetPassword() {
  // 明确指定类型，此时resetTokenResponse会被推断为 ResetTokenValidationResponse | null
  const resetTokenResponse = useLoaderData<ResetTokenValidationResponse | null>();

  // 可以安全访问success属性，TS会自动处理null的情况
  if (resetTokenResponse?.success) {
    return <div>Token有效，可以重置密码</div>;
  } else {
    return <div>Token无效或不存在</div>;
  }
}

关于as断言的说明 #

如果遇到API返回结构无法提前明确（比如动态数据），确实可以用as断言临时解决，但这会跳过TS的类型检查，不够严谨。更推荐的方式是结合类型守卫（比如typeof、in运算符）来缩小类型范围，同时保持类型安全：

// 类型守卫示例
function isResetTokenResponse(data: unknown): data is ResetTokenValidationResponse {
  return typeof data === 'object' && data !== null && 'success' in data && typeof (data as ResetTokenValidationResponse).success === 'boolean';
}

// 在组件中使用
const resetTokenResponse = useLoaderData();
if (isResetTokenResponse(resetTokenResponse)) {
  // 这里resetTokenResponse的类型会被推断为ResetTokenValidationResponse
  console.log(resetTokenResponse.success);
}

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