SvelteKit 动态路由参数解析：正确访问 params 对象中的命名段

在 SvelteKit 中，动态路由文件夹名（如 [collections]/）会将对应路径段映射为 params 对象的同名属性（即 params.collections），而非 params.id；若未正确匹配参数名，params 将为空或缺失预期字段，导致数据查找失败。

在 sveltekit 中，动态路由文件夹名（如 `[collections]/`）会将对应路径段映射为 `params` 对象的同名属性（即 `params.collections`），而非 `params.id`；若未正确匹配参数名，`params` 将为空或缺失预期字段，导致数据查找失败。

你遇到的 TypeError: Cannot read properties of undefined (reading 'title') 根本原因在于 动态路由参数名与 params 解构不一致。

SvelteKit 的约定非常明确：

• 文件夹名 [collections]/ 表示该层级的 URL 路径段（例如 /art/crisis-vision/ 中的 crisis-vision）将被注入到 params 对象中，键名为 collections（即 params.collections）；
• 它不会自动映射为 params.id —— id 是你数据对象的内部字段，与路由参数命名无关。

因此，你的 +page.server.js 中这行代码：

const ret = collections.find((c) => c.id === params.id); // ❌ params.id 不存在！

实际访问的是 params.id，而 params 对象中只有 collections 属性（如 params = { collections: 'crisis-vision' }），所以 params.id 为 undefined，find() 返回 undefined，最终 data.ret 为 undefined，触发渲染时报错。

✅ 正确写法应改为：

// +page.server.jsimport { error } from '@sveltejs/kit';import { collections } from '../data.js';export function load({ params }) {  const collection = collections.find((c) => c.id === params.collections); // ✅ 使用 params.collections  if (!collection) throw error(404, 'Collection not found');  return { collection }; // 推荐使用语义化字段名，避免嵌套 data.ret}

相应地，+page.svelte 也需同步更新：

<!-- +page.svelte --><script>  export let data;  console.log('Loaded collection:', data.collection);</script><h1>{data.collection.title}</h1><div>{@html data.collection.content}</div>

? 额外建议与注意事项：

• 命名一致性优先：若希望参数名为 id，请将文件夹重命名为 [id]/（如 art/[id]/+page.server.js），这样 params.id 才有效；
• 始终校验数据存在性：find() 可能返回 undefined，建议配合 if (!collection) throw error(404) 提升健壮性；
• 避免深层嵌套返回值：直接返回 { collection } 比 { ret } 更清晰、易维护；
• 开发时调试技巧：在 load 函数内添加 console.log({ params })，可直观确认参数结构。

通过严格遵循 SvelteKit 的参数命名映射规则，即可彻底解决“空参数”问题，让动态路由数据加载稳定可靠。