在SvelteKit load函数中使用Directus SDK数据无法渲染的问题

核心问题分析 #

1. load函数返回格式错误：SvelteKit的load函数无需将数据嵌套在props对象中，直接返回键值对即可。
2. 页面数据接收方式不匹配：页面组件对load返回数据的接收和类型声明存在偏差。
3. 服务端Directus客户端认证问题：服务端环境没有浏览器登录状态，需确保客户端能正常访问目标数据。

分步解决 #

1. 修正+page.ts的load函数返回格式 #

移除props嵌套结构，直接返回数据：

import { client } from "$lib/config/init";
import { readSingleton } from '@directus/sdk';

export async function load() {
    let landingPageData: any = null;
  
    try {
      landingPageData = await client.request(readSingleton('FrontPage'));
      console.log('landingPageData:', landingPageData);
      // 直接返回数据，无需props包裹
      return {
        landingPageData
      };
    } catch (error) {
      console.error('Error fetching data:', error);
      return {
        error: new Error('Failed to fetch front page data')
      };
    }
}

2. 修正+page.svelte的数据接收 #

调整页面组件的数据接收逻辑，匹配load函数的返回结构：

import type { PageData } from './$types';
import Hero from "$lib/core/hero.svelte";

// 接收完整的PageData对象
export let data: PageData;

// 打印正确的数据
console.log('landingPageData:', data.landingPageData);

页面模板中渲染数据时，使用data.landingPageData：

{#if data?.landingPageData}
  <Hero data={data.landingPageData} />
{:else if data?.error}
  <p>{data.error.message}</p>
{/if}

3. 确保Directus客户端在服务端正常工作 #

服务端无法获取浏览器登录状态，需调整客户端配置：

• 若FrontPage集合为公开数据，在Directus后台开启该集合的公开访问权限。
• 若需认证访问，在客户端初始化时使用静态token：

// $lib/config/init.js
import { createDirectus, rest } from '@directus/sdk';

export const client = createDirectus('你的Directus地址')
  .with(rest())
  // 添加Directus后台生成的静态访问token
  .with(token('你的静态token'));

4. 清理残留客户端代码 #

移除页面中onMount内的旧数据请求逻辑，避免数据来源混淆，确保所有数据依赖均来自load函数返回的data对象。

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