Sveltekit：如何让+page.ts的load()等待+layout.ts加载完成？

首先，你的核心问题出在+layout.ts的load函数缺少async关键字——因为函数内部使用了await，必须声明为异步函数才能正确执行，否则会抛出语法错误，导致布局无法返回正确的globalData，页面自然拿不到数据。

方法一：通过SvelteKit原生的data传递（推荐） #

这是SvelteKit设计的布局与页面间传递数据的标准方式，布局的load会优先于页面的load执行，页面的load参数中的data会自动包含上层布局返回的数据。

修正后的代码：

// +layout.ts
export const load = async () => { // 添加async关键字
  const globalData = await getGlobalData();
  store.setData(globalData);
  return { globalData };
};

// +page.ts
export const load = ({ data }) => {
  // 此时data.globalData就是布局返回的全局数据
  const stuff = getPageData(data.globalData);
  return { stuff };
};

如果getPageData是异步函数，记得给页面的load也加上async：

// +page.ts
export const load = async ({ data }) => {
  const stuff = await getPageData(data.globalData);
  return { stuff };
};

方法二：使用Store（仅在特殊场景下使用） #

如果必须依赖Store传递数据，需要确保页面的load等待Store的数据准备完成。可以给Store添加一个返回Promise的方法，或者在页面中订阅Store直到数据就绪：

// 假设你的Store实现了一个waitForData方法，返回Promise
export const load = async () => {
  const globalData = await store.waitForData();
  const stuff = getPageData(globalData);
  return { stuff };
};

但这种方式不如原生data传递可靠，尤其是在服务端渲染场景下，Store的状态同步可能出现问题，优先推荐方法一。

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