React组件迁移TSX遇useParams类型错误，求正确类型定义

问题原因 #

useParams<{ id: string }>()的写法存在类型不严谨：React Router的useParams返回的参数对象中，所有键都是可选的（路由未匹配时参数可能不存在），泛型传入{ id: string }会导致TS推断出的实际类型和泛型不一致，触发ESLint的"Unsafe assignment of an any value"错误。

可行修复方案 #

方案1：显式定义参数接口并做类型断言

先定义明确的参数类型，再通过断言确保类型安全：

// 定义参数接口
interface DetailsParams {
  id?: string;
}

const WrappedDetails = () => {
  // 断言为定义好的接口类型
  const params = useParams<DetailsParams>() as DetailsParams;
  return (
    <ErrorBoundary>
      <Details params={params} />
    </ErrorBoundary>
  );
};

这个方案直接对齐了useParams的实际返回值（参数可选），同时明确了类型，ESLint会认可该赋值的安全性。

方案2：添加参数存在性校验

既然参数可能不存在，在组件中先校验id的存在性，同时调整泛型为可选类型：

const WrappedDetails = () => {
  const params = useParams<{ id?: string }>();
  
  // 校验参数，避免后续使用undefined
  if (!params.id) {
    return <div>无效的宠物ID</div>;
  }

  return (
    <ErrorBoundary>
      <Details params={params} />
    </ErrorBoundary>
  );
};

这个方案不仅修复了ESLint错误，还提升了代码的健壮性，处理了参数缺失的边界情况。

方案3：基于路由配置生成类型（适合有集中路由配置的项目）

如果项目使用createBrowserRouter等方式定义路由，可以从路由配置自动生成参数类型：

import { createBrowserRouter, RouteObject, useParams } from "react-router-dom";

// 定义路由配置
const routes: RouteObject[] = [
  { path: "/details/:id", element: <WrappedDetails /> },
];

const router = createBrowserRouter(routes);

// 从路由配置生成参数类型
type DetailsRouteParams = typeof router.state.matches[0]['params'];

const WrappedDetails = () => {
  const params = useParams<DetailsRouteParams>() as DetailsRouteParams;
  return (
    <ErrorBoundary>
      <Details params={params} />
    </ErrorBoundary>
  );
};

这种方式能让参数类型和路由定义完全同步，避免手动维护类型不一致。

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