SvelteKit load函数中的空参数

Question

我正在尝试使用SvelteKit构建一个艺术作品集，按照SvelteKit教程进行操作。我有一个名为art/的页面，其中有一个名为[collections]/的子目录，用于存放不同系列的艺术作品。

我暂时从一个名为data.js的文件中加载数据，该文件具有以下结构：

export const collections = [
    {
        title: 'Crisis Vision',
        id: 'crisis-vision',
        content: '<p>crisis vision content</p>'
    },

    {
        title: 'From the Garden',
        id: 'from-the-garden',
        content: '<p>from the garden content</p>'
    },
    
    {
        title: 'As Lost Through Collision',
        id: 'as-lost',
        content: '<p>as lost content</p>'
    }
]; 

在[collections]/中的+page.server.js文件具有以下内容：

import { error } from '@sveltejs/kit';
import { collections } from '../data.js';

export function load( {params} ) {
    const ret = collections.find((c) => c.id === params.id);
    return { 
        ret 
    };
}

+page.svelte文件的内容如下：

<script>
    export let data;
    console.log(JSON.stringify(data))
</script>

<h1>{data.ret.title}</h1>
<div>{@html data.ret.content}</div>

当我尝试运行这个代码时，我得到了一个“TypeError: Cannot read properties of undefined (reading 'title')”的错误。

我相信我已经将问题缩小到了params变量上。当我在+page.server.js文件中删除params.id，并直接用数据中的一个示例替换它，比如'as-lost'，它就像预期的那样工作如此所示（尽管每个集合显示相同的内容）。当我在页面文件的脚本部分添加console.log(JSON.stringify(data))时，它显示params对象为空。

我在这里做错了什么？我已经尝试按照教程的每一步进行操作，但仍然无法正常工作。请帮忙解决。

- ShashComandur

Answer 1

如果您在路由路径中使用 [collections]，您还必须使用 params.collections。（也许将其改为单数形式）

- H.B.

---

我试了一个小时，一直把头撞在墙上，试图弄清楚这个问题！非常感谢你！ - undefined

建议使用调试器，然后你可以检查范围内的所有对象。(你可以使用旁边的复选标记轮廓接受答案。) - undefined