如何修复React JS中的TS2345类型不兼容错误？

错误原因 #

你自定义的AppRoute接口与use-react-router-breadcrumbs库要求的BreadcrumbsRoute<string>类型结构不匹配——两者没有共同属性（核心是AppRoute缺少库要求的必填字段）。

解决方案1：让自定义路由类型继承库的类型 #

直接修改AppRoute接口，使其继承BreadcrumbsRoute<string>，同时保留你的自定义属性，从根源对齐类型：

// router/routes.tsx
import { BreadcrumbsRoute } from 'use-react-router-breadcrumbs';
import type { ReactNode } from 'react';

// 继承库的路由类型，添加自定义属性
interface AppRoute extends BreadcrumbsRoute<string> {
  name: string;
  element: ReactNode;
  // 其他自定义属性...
}

// 定义路由数组时，确保每个项包含path（必填），可选自定义breadcrumb
export const dashboardRoutes: AppRoute[] = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    element: <DashboardPage />,
    breadcrumb: '首页' // 可自定义面包屑文本/组件，不填则默认用path最后一段
  },
  {
    path: '/dashboard/users',
    name: '用户管理',
    element: <UserPage />,
    breadcrumb: '用户列表'
  }
];

在main.tsx中直接使用即可：

import { useBreadcrumbs } from 'use-react-router-breadcrumbs';
import { dashboardRoutes } from './router/routes';

function App() {
  const breadcrumbs = useBreadcrumbs(dashboardRoutes);
  // 渲染面包屑逻辑...
}

解决方案2：转换路由数组类型（不修改原AppRoute） #

如果不想改动原AppRoute接口，可在传入useBreadcrumbs前，将自定义路由数组映射为库要求的类型结构：

// main.tsx
import { useBreadcrumbs, BreadcrumbsRoute } from 'use-react-router-breadcrumbs';
import { dashboardRoutes } from './router/routes';

// 映射出符合要求的路由数组（确保原AppRoute有path属性）
const breadcrumbRoutes: BreadcrumbsRoute<string>[] = dashboardRoutes.map(route => ({
  path: route.path,
  breadcrumb: route.name // 用自定义name作为面包屑文本，或自行调整
}));

function App() {
  const breadcrumbs = useBreadcrumbs(breadcrumbRoutes);
  // 渲染面包屑逻辑...
}

关键注意点 #

• BreadcrumbsRoute<string>的必填字段是path，如果你的AppRoute原本没有这个字段，必须先为其添加，否则无法完成类型匹配。
• breadcrumb是可选字段，不填时库会自动提取path的最后一段作为面包屑文本。

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