使用TanStack Router时遇到TypeScript深度类型擦除问题

问题1：Router.navigate的to属性被Parameters<T>推断为any #

TypeScript的Parameters<T>在处理深层嵌套泛型类型时会出现类型擦除，导致无法正确提取Router.navigate的to参数类型。

解决方案 #

直接使用TanStack Router提供的内置类型，或手动提取精确的参数类型：

import type { Router, To } from '@tanstack/react-router';

// 方案1：用官方内置的To类型
type NavigateToType = To;

// 方案2：从Router实例中手动提取
import { router } from './your-router-file';
type AppRouter = typeof router;
type AppNavigateToParam = Parameters<AppRouter['navigate']>[0]['to'];

问题2：beforeLoad中opts.search被推断为never #

直接将artificialDelay赋值给RouteOptions.beforeLoad时，TypeScript无法正确推断回调参数的泛型类型，导致opts.search被解析为never。

解决方案 #

通过显式指定泛型或包装函数，让TypeScript正确识别参数类型：

方案1：显式指定泛型参数

import type { BeforeLoadRouteOptions } from '@tanstack/react-router';
import type { RootSearchSchema } from './your-schema-file';

function artificialDelay<T>(ms = 5000): (val?: T) => Promise<T | undefined> {
  return (val) => new Promise(resolve => setTimeout(() => resolve(val), ms));
}

// 在beforeLoad中明确指定泛型
const routeOptions = {
  beforeLoad: artificialDelay<BeforeLoadRouteOptions<RootSearchSchema>>()
};

方案2：用包装函数自动推断

const routeOptions = {
  beforeLoad: (opts) => artificialDelay()(opts)
};

这种方式让TypeScript先推断出opts的完整类型，再传递给artificialDelay的回调，避免泛型擦除导致的类型不匹配。

额外说明 #

这类问题是TypeScript处理深层泛型嵌套时的类型擦除行为导致，并非TanStack Router的问题。优先使用库提供的内置类型，或显式指定泛型参数，能有效规避这类类型推断异常。

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