Laravel Inertia+Svelte持久化布局时{#each}报错求助

这个错误的核心是持久化布局下页面切换时，$page.props.products暂时不是数组类型：

• 直接访问页面时，Inertia会一次性加载完整的页面props，products是正常数组，所以{#each}能正常遍历。
• 点击<Link>用持久化布局跳转时，布局组件会被复用，子页面（Welcome.svelte）会先尝试渲染，但此时目标页面的props可能还未完全加载，或者跳转过程中products变为undefined/非数组值，导致{#each}抛出异常，中断跳转。

1. 给products设置默认空数组 #

修改Welcome.svelte中的{#each}语句，添加默认值确保始终是数组：

{#each $page.props.products || [] as product}
    <Card productImages={product.images} productName={product['name']} productDescription={product['description']} primaryButtonText={"Buy @" + product['product_store']}></Card>
{/each}

2. 使用Svelte的await块等待props加载 #

如果products是异步获取或需要等待props就绪，用await块包裹遍历逻辑：

<div class="min-h-screen">
    {#await $page.props.products}
        <div>加载中...</div>
    {:then products}
        {#each products as product}
            <Card productImages={product.images} productName={product['name']} productDescription={product['description']} primaryButtonText={"Buy @" + product['product_store']}></Card>
        {/each}
    {:catch err}
        <div>加载商品失败</div>
    {/await}
</div>

3. 确保后端所有路由正确传递props #

检查Laravel控制器中，返回Welcome页面的方法是否始终传递products数组，比如：

// 示例控制器方法
public function index()
{
    return Inertia::render('Welcome', [
        'products' => Product::query()->get(), // 确保返回数组
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
    ]);
}

注意：如果从/login页面跳转回首页，首页的控制器必须正确返回上述props，不能遗漏。

• 打开浏览器DevTools的Network标签，查看跳转时Inertia的XHR请求，检查返回的props中products的类型和值是否正确。
• 在Welcome.svelte中添加调试代码，打印$page.props.products的变化：

  <script>
      // ...其他代码
      $: console.log('Products:', $page.props.products);
  </script>
  

  观察点击Link跳转时，这个值是否出现非数组的情况。
• 检查GuestLayout的props传递：确保所有使用该布局的页面都传递了canLogin和canRegister，布局props缺失可能导致渲染异常，间接影响子页面。

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