SvelteKit：数据加载过程中的类型错误问题

问题概述 #

在SvelteKit项目中通过+page.server.js的load函数从Firebase实时数据库加载数据，传递给页面和组件时出现类型错误：访问data.post和postData.quote时，提示对应字段不存在于{}中。

项目结构 #

src/
├── components/
│   └── Post.svelte
└── routes/
    ├── +page.svelte
    ├── +page.server.js
    └── +layout.svelte

相关代码片段 #

+page.server.js #

/** @type {import('./$types').PageServerLoad} */
export function load({ params }) {
  return {
    post: {
      "quote": "Something quote",
      "description": "Something description"
    }
  };
}

+page.svelte #

<script>
    import Post from '../components/Post.svelte'
    /** @type {import('./$types').PageData} */
    export let data;
</script>

<h1>Lyrics and Quotes</h1>
<Post postData={data.post}/> <!-- 错误：属性'post'不存在于'{}'中。 -->

Post.svelte #

<script>
    /** @type {import('../routes/$types').PageData} */
    export let postData;
</script>

<p>
    This is a post.
    {postData.quote} <!-- 错误：属性'quote'不存在于'{}'中。 -->
</p>

解决办法 #

1. 重启开发服务器并清理缓存 #

SvelteKit会自动根据load函数返回值生成$types类型文件，但缓存可能导致类型未更新，按以下步骤操作：

• 关闭当前开发服务器（按Ctrl+C）
• 删除项目根目录下的.svelte-kit缓存文件夹
• 重新启动开发服务器（执行npm run dev或对应包管理命令）

2. 手动定义数据类型（更稳妥） #

如果自动生成类型仍有问题，手动定义类型避免推导错误：
在routes目录新建types.d.ts文件：

// 定义单条帖子的类型
export interface Post {
  quote: string;
  description: string;
}

// 定义页面数据的类型
export interface PageData {
  post: Post;
}

修改各文件的类型引用：

• +page.server.js：

/** @type {import('./types').PageData} */
export function load({ params }) {
  return {
    post: {
      "quote": "Something quote",
      "description": "Something description"
    }
  };
}

• +page.svelte：

<script>
    import Post from '../components/Post.svelte'
    /** @type {import('./types').PageData} */
    export let data;
</script>

<h1>Lyrics and Quotes</h1>
<Post postData={data.post}/>

• Post.svelte：注意postData是单条帖子，而非整个PageData

<script>
    /** @type {import('../routes/types').Post} */
    export let postData;
</script>

<p>
    This is a post.
    {postData.quote}
</p>

3. 检查TypeScript配置（使用TS时） #

确保svelte.config.js配置正确：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
};

export default config;

tsconfig.json需继承SvelteKit配置：

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "strict": true
  }
}

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