SvelteKit API并行请求后数据无法传递至页面的问题排查

报错信息 #

Unrecoverable HMR error in <+page>: next update will trigger a full reload
Uncaught (in promise) Error: {#each} only works with iterable values.

核心错误点 #

• 组件数据解构不匹配：+page.svelte中错误地从data里解构fetchQuotes，但+page.js返回的属性是quotes，导致拿到的不是数组而是无效值，触发{#each}迭代错误。
• 并行请求处理不规范：原代码直接返回异步函数调用的Promise，虽然SvelteKit会自动解析，但用Promise.all显式处理并行请求更可靠，能确保两个请求同时执行且返回解析后的数组。

修正后的代码 #

routes/quotes/+page.js

export const load = async ({ fetch }) => {
    const fetchQuotes = async () => {
        const resultQuotes = await fetch('https://dummyjson.com/quotes?limit=10');
        const quotesData = await resultQuotes.json();
        return quotesData.quotes;    
    };

    const fetchUsers = async () => {    
        const resultUsers = await fetch('https://dummyjson.com/users?limit=10');
        const userData = await resultUsers.json();
        return userData.users;    
    };

    // 并行执行两个请求，等待所有请求完成后返回数据
    const [quotes, users] = await Promise.all([fetchQuotes(), fetchUsers()]);

    return { quotes, users };
};

routes/quotes/+page.svelte

<script>
  export let data;
  // 解构正确的属性名quotes
  const { quotes } = data;
</script>

<h1>Quotes</h1>

{#each quotes as item}
  <h2>{item.quote}</h2>
  <p>{item.author}</p>
{/each}

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