SvelteKit中data prop返回undefined，加载状态无法正常显示

核心问题 #

你的代码存在两个异常：isDataLoaded 持续输出 undefined，且加载状态文本从未显示。主要原因有两点：

1. 数据源结构可能不符合预期，导致 load 函数返回的 data 缺失 summaries 字段，使判断表达式返回 undefined
2. 由于 projectData 是本地同步数据，load 函数执行过快，服务器端直接完成渲染，客户端根本没机会进入加载状态

修复步骤 #

1. 确保数据源与 load 函数的鲁棒性

修改 +page.server.js，增加数据源校验，并在出错时返回空的 summaries 避免 undefined：

import { projectData } from '$lib/data.js';

export async function load() {
    try {
        // 校验数据源结构
        if (!Array.isArray(projectData) || projectData.length === 0) {
            throw new Error('projectData 为空或格式无效');
        }
        const projects = projectData[0].content;
        if (!Array.isArray(projects)) {
            throw new Error('项目内容不是数组格式');
        }

        // 模拟异步加载（仅用于调试加载状态，生产环境可移除）
        await new Promise(resolve => setTimeout(resolve, 1000));

        return {
            summaries: projects.map((project) => ({
                title: project.title,
                image: project.image,
                url: project.url
            }))
        };
    } catch (error) {
        console.error('加载数据失败:', error);
        // 返回空数组保证页面能正常判断状态
        return {
            summaries: [],
            status: 500,
            error: new Error('内部服务器错误')
        };
    }
}

2. 修正页面状态判断逻辑

修改 +page.svelte，明确区分加载中、加载成功、加载失败三种状态，避免 undefined 导致的判断异常：

<script>
  export let data;

  // 明确判断数据是否加载完成
  $: isDataLoaded = data && Array.isArray(data.summaries);
  // 判断是否加载出错
  $: hasError = data && data.error;

  console.log('当前数据:', data);
  console.log('是否加载完成:', isDataLoaded);
</script>

{#if hasError}
  <p>加载出错：{data.error.message}</p>
{:else if isDataLoaded}
  {#if data.summaries.length > 0}
    <p>Content goes here...</p>
  {:else}
    <p>暂无项目数据</p>
  {/if}
{:else}
  <p>Loading...</p>
{/if}

关键说明 #

• 本地同步数据的 load 函数会在服务器端立即执行完成，客户端拿到的是已渲染好的页面，所以看不到加载状态。添加 setTimeout 是为了模拟真实异步请求场景，方便调试加载动画/骨架屏，生产环境可移除。
• 原判断表达式 data && data.summaries && Array.isArray(data.summaries) 中，如果 data.summaries 为 undefined，整个表达式会返回 undefined，而 Svelte 中 {#if undefined} 会被视为假值，但如果服务器端已经返回了 data（即使没有 summaries），可能导致状态判断混乱。通过强制返回空数组，能保证 isDataLoaded 始终是布尔值。

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