SvelteKit 2.0.1异步请求报错：Cannot read properties of undefined (reading 'length')

错误原因 #

报错触发于{#each posts as guide}代码处：组件初始化阶段posts的值为undefined，而Svelte的{#each}指令要求遍历可迭代对象（如数组），undefined不存在length属性，因此抛出该类型错误。

解决方案 #

1. 为posts设置默认空数组 #

在组件脚本中为posts声明默认值，确保组件首次渲染时posts是一个合法的可迭代空数组：

<script>
    // 初始化空数组，避免undefined导致的each指令报错
    export let posts = [];
</script>

2. 规范拆分数据逻辑（推荐） #

SvelteKit 2.x更推荐将数据请求逻辑拆分到单独的+page.js文件中，而非组件内的context="module"脚本：

• 在src/about/目录下创建+page.js文件：

export async function load({ fetch }) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  // 添加请求状态校验，捕获请求失败场景
  if (!res.ok) {
    throw new Error('获取文章列表失败');
  }
  const posts = await res.json();

  return {
    props: { posts }
  };
}

• 保持+page.svelte的简洁性，接收posts并设置默认值：

<script>
    export let posts = [];
</script>

<div class="guides">
    <ul>
        {#each posts as guide}
            <!-- 修正HTML结构：ul的直接子元素必须是li -->
            <li><a href="/">{guide.title}</a></li>
        {/each}
    </ul>
</div>

额外修正点 #

你的代码中直接在<ul>内嵌套<a>标签不符合HTML规范，ul的直接子元素必须为<li>，修正后既符合规范，也能避免潜在的样式或布局问题。

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