SvelteKit中路由参数为何在VS Code触发类型错误？

问题场景 #

我是Svelte和TypeScript新手，正在使用SvelteKit开发首个应用，尝试创建一个带有整数路由参数的页面。

路由结构 #

src
 app.d.ts
 params
  integer.ts
 routes
   posts
    [id=integer]
     +page.server.ts
     +page.svelte

现有代码 #

app.d.ts

declare namespace App {
  interface Locals {
    accessToken: string | null,
  }
}

+page.server.ts

export function load({ params }) {
  return {
    id: params.id
  };
}

+page.svelte

<script lang="ts">
  export let data;
</script>

<h1>{data.id}</h1>

遇到的问题 #

VS Code提示+page.svelte存在错误：data.id未定义，且TypeScript错误地推断data对象的类型为{ accessToken: string | null}。页面实际可正常访问，但需要消除该类型错误。

解决方案 #

1. 扩展App命名空间的PageData接口 #

TypeScript误判类型的核心原因是app.d.ts中未定义PageData接口，导致它默认使用Locals的类型作为data的类型。在app.d.ts中添加PageData定义：

declare namespace App {
  interface Locals {
    accessToken: string | null,
  }
  // 定义空的PageData接口，让SvelteKit自动推断页面级的data类型
  interface PageData {}
}

2. 在组件中引入自动生成的类型（推荐） #

SvelteKit会自动为每个页面生成类型文件$types，在+page.svelte中引入并指定data的类型，即可让TypeScript正确识别data.id：

<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<h1>{data.id}</h1>

3. 确保整数参数匹配器的类型正确 #

检查params/integer.ts的实现，确保它正确验证并转换路由参数为整数，示例实现：

import type { ParamMatcher } from '@sveltejs/kit';

export const match: ParamMatcher = (param) => {
  const num = parseInt(param, 10);
  return !isNaN(num) && num.toString() === param;
};

这样params.id会被正确推断为number类型，data.id的类型也会同步正确识别。

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