如何在SvelteKit的+page.server.ts加载函数中访问ContextAPI存储的用户数据

你遇到的Error: Function called outside component initialization是因为getContext是Svelte组件专属API，只能在组件（比如+page.svelte、自定义组件）的初始化阶段调用，而+page.server.ts的load函数属于服务端逻辑，不在组件生命周期里，自然没法直接访问组件上下文。

下面是具体的解决思路：

方案1：直接在服务端load中获取用户数据 #

服务端load函数本身就支持调用外部API，完全可以在这里直接获取用户数据，再通过props传递给页面组件，之后组件再把数据存入Context供子组件使用。

示例代码：

+page.server.ts #

export async function load({ fetch }) {
  // 直接在服务端调用外部API获取用户数据
  const res = await fetch('你的外部API地址');
  const user = await res.json();
  
  // 返回的数据会自动传给页面组件的data属性
  return { user };
}

+page.svelte #

<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  
  // 接收服务端load返回的数据
  export let data;

  // 将数据存入store，再放到Context中供子组件使用
  const userStore = writable(data.user);
  setContext('user', userStore);
</script>

方案2：抽离复用的数据获取逻辑 #

如果客户端和服务端需要复用同一份API请求逻辑，可以把获取用户数据的代码抽成独立函数，放在$lib目录下，两边都能调用。

$lib/user.ts #

export async function getUser(fetch: typeof globalThis.fetch) {
  const res = await fetch('你的外部API地址');
  return res.json();
}

+page.server.ts #

import { getUser } from '$lib/user';

export async function load({ fetch }) {
  const user = await getUser(fetch);
  return { user };
}

+page.svelte #

<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  import { getUser } from '$lib/user';
  
  export let data;

  // 如果服务端已经返回了user，直接用；否则客户端再请求
  const userStore = writable(data.user || await getUser(fetch));
  setContext('user', userStore);
</script>

注意事项 #

如果用户数据依赖客户端的登录态（比如Cookie），服务端load函数可以通过cookies参数获取，再传递给API：

export async function load({ fetch, cookies }) {
  const res = await fetch('你的外部API地址', {
    headers: {
      Cookie: cookies.getAll().map(c => `${c.name}=${c.value}`).join('; ')
    }
  });
  const user = await res.json();
  return { user };
}

总结：服务端逻辑和组件Context是完全隔离的环境，不能跨环境直接访问。正确的流程是服务端获取数据 → 传给组件 → 组件存入Context，或者在组件内按需获取数据后存入Context。

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