SvelteKit load函数参数为空 艺术作品集页面报错求助

核心问题 #

你遇到的params.id为空、读取title报错的情况，是因为动态路由的目录命名不符合SvelteKit规则，导致框架无法正确解析URL中的参数并注入到params对象里。

具体修复步骤 #

1. 修正动态路由目录命名 #

SvelteKit的动态路由必须用[参数名]格式命名目录/文件。如果你要通过params.id获取作品集ID，对应的目录应该命名为[id]，而不是[collections]。

举个正确的路由结构例子：

• 单层级动态路由：art/[id]/+page.server.js，访问art/as-lost时，params.id会自动被赋值为as-lost。
• 嵌套层级：art/collections/[id]/+page.server.js，访问art/collections/as-lost时，params.id生效。

2. 确认load函数的参数写法 #

确保你的+page.server.js里的load函数正确解构了params参数，写法如下：

export async function load({ params }) {
  // 导入数据文件
  const collections = (await import('../data.js')).default;
  // 匹配对应ID的集合
  const targetCollection = collections.find(item => item.id === params.id);

  // 处理集合不存在的情况，避免后续报错
  if (!targetCollection) {
    return { status: 404 };
  }

  return { collection: targetCollection };
}

3. 验证访问路径的正确性 #

必须访问包含具体ID的路由，比如http://localhost:5173/art/as-lost（对应单层级结构），此时params.id才会被正确赋值。如果直接访问不带ID的路径，params自然是空对象。

4. 检查data.js的数据结构 #

确认你的data.js中每个集合对象的id字段与测试值完全匹配（注意大小写、无多余空格）：

// data.js示例
export default [
  {
    id: 'as-lost',
    title: 'As Lost',
    content: '作品集内容...'
  },
  // 其他集合数据
];

页面组件的正确使用 #

在+page.svelte中接收数据时，记得处理可能的空值：

<script>
  export let data;
  const { collection } = data;
</script>

{#if collection}
  <h1>{collection.title}</h1>
  <div>{collection.content}</div>
{:else}
  <p>作品集不存在</p>
{/if}

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