SvelteKit页面缺失预期props 'data'问题求助

1. 检查+page.server.ts的返回格式 #

必须确保load函数返回包含data属性的对象，这是SvelteKit约定的页面数据传递格式：

export async function load() {
  const res = await fetch('你的接口地址');
  const fetchedData = await res.json();
  // 核心：返回带data的对象，不能直接返回原始数据
  return { data: fetchedData };
}

避免直接返回接口数据（return fetchedData）或使用非data的属性名（比如return { list: fetchedData }）。

2. 确认+page.svelte的组件声明 #

页面组件必须显式声明接收data prop：

<script>
  // 必须导出data变量，类型可选
  export let data;
</script>

<!-- 测试渲染data内容 -->
<pre>{JSON.stringify(data, null, 2)}</pre>

如果load返回的是嵌套结构（比如return { data: { user: fetchedData } }），确保组件内使用data.user这类正确的路径。

3. 核对路由文件配对 #

检查+page.server.ts和+page.svelte是否在同一个路由目录下，比如都位于src/routes/your-subpage/中。SvelteKit是按路由目录配对文件的，路径不匹配会导致页面无法获取server load的数据。

4. 实用调试技巧 #

• 在+page.server.ts中添加日志，确认返回结构：

  export async function load() {
    const res = await fetch('你的接口地址');
    const fetchedData = await res.json();
    const returnObj = { data: fetchedData };
    console.log('Server Load返回:', returnObj); // 查看终端输出
    return returnObj;
  }
  

• 在+page.svelte中添加日志，确认数据是否传入：

  <script>
    export let data;
    console.log('页面接收的data:', data); // 查看浏览器控制台
  </script>
  

如果终端能看到正确的返回对象，但浏览器端data为undefined，优先排查路由文件是否配对、返回格式是否符合要求。

5. 排除特殊场景 #

• 如果使用了layout.server.ts，注意不要在layout的load函数中使用与页面data冲突的命名（默认layout和页面的data会合并，但冲突可能导致异常）；
• 若给data添加了TypeScript类型声明，可先暂时去掉类型，排查是否因类型不匹配导致隐性错误。

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