我在我的SvelteKit应用中使用一段代码来生成面包屑导航。我在这段代码的灵感来自 在这里。当前的设置看起来是这样的：

<!-- ./breadcrumbs.svelte -->

<script lang="ts">
  import { resolve } from '$app/paths';
  import { getBreadcrumbs } from './breadcrumb-state.svelte';
</script>

<nav class="breadcrumbs">
  <ul>
    {#each getBreadcrumbs() as breadcrumb (breadcrumb.path)}
      <li><a href={resolve(breadcrumb.path)}>{breadcrumb.name}</a></li>
    {/each}
  </ul>
</nav>

问题出在 resolve(breadcrumb.path) 调用上，TypeScript给出以下错误：

Argument of type '[string]' is not assignable to parameter of type '[route: "/"] | [route: "/demo"] | [route: "/demo/paraglide"] | [route: "/logbook"] | [route: `/logbook/${string}` & {}] | [route: "/logbook/[slug]", params: { slug: string; }]'...

似乎它从我的SvelteKit路由文件夹中的导航结构获取类型定义。挺酷的！但我该如何避免这个问题？我想让代码符合TypeScript的要求，但似乎找不到合适的办法。除了忽略这个问题之外，还有没有其他办法？

解决方案

如果面包屑的类型始终包含完全有效的路径，你可以在那边直接改成那个类型：

import type { Pathname } from '$app/types';

export interface Breadcrumb {
  path: Pathname;
  name: string;
}

这可能会在其他地方引发类型错误，即在创建面包屑对象时，因此你可能需要在这里使用类型断言（as Pathname 或 as any）来处理。

这取决于路径是如何构造的，例如如果它们是从路径的若干部分动态拼接而成，并非所有值都可以用 Pathname 来进行类型化，你将需要在某个点通过断言从 string 回到精确的字面量类型。