如何在SvelteKit组件中使用异步函数的返回值作为Props

错误原因分析 #

直接调用异步函数readUsernameFromDatabase会返回Promise对象，而非实际的用户名字符串，组件接收的props会是Promise，无法正常使用。

解决方案 #

方案1：页面组件用Load函数预获取数据（SvelteKit推荐）

如果是页面组件，优先通过+page.ts的load函数提前获取异步数据，再传递给组件：

+page.ts：

import type { PageLoad } from './$types';
import { userStore } from '$lib/stores';
import { readUsernameFromDatabase } from '$lib/db';
import { get } from 'svelte/store';

export const load: PageLoad = async () => {
  const user = get(userStore);
  // 等待异步函数返回结果
  const username = await readUsernameFromDatabase(user.uid);
  return { username };
};

+page.svelte：

<script lang="ts">
  import UsernameField from '$lib/components/UsernameField.svelte';
  // 接收load函数返回的username
  export let username: string;
</script>

<!-- 直接传递已解析的字符串 -->
<UsernameField {username} />

方案2：普通组件用{#await}块处理异步请求

如果是嵌套组件，无法使用load函数，可通过响应式声明结合{#await}块处理异步结果：

<script lang="ts">
  import { userStore } from '$lib/stores';
  import UsernameField from '$lib/components/UsernameField.svelte';
  import { readUsernameFromDatabase } from '$lib/db';

  // 当uid变化时，重新发起请求
  $: usernamePromise = $userStore.uid ? readUsernameFromDatabase($userStore.uid) : null;
</script>

{#if usernamePromise}
  {#await usernamePromise}
    <p>加载用户名中...</p>
  {:then username}
    <!-- 拿到实际值后再传递给组件 -->
    <UsernameField {username} />
  {:catch error}
    <p>加载失败：{error.message}</p>
  {/await}
{:else}
  <p>未获取到用户ID</p>
{/if}

方案3：Svelte 4+ 用$await简化语法

Svelte 4及以上支持$await语法，可更简洁地处理Promise：

<script lang="ts">
  import { userStore } from '$lib/stores';
  import UsernameField from '$lib/components/UsernameField.svelte';
  import { readUsernameFromDatabase } from '$lib/db';

  $: usernamePromise = $userStore.uid ? readUsernameFromDatabase($userStore.uid) : null;
</script>

{#await $usernamePromise}
  <p>加载中...</p>
{:then username}
  <UsernameField {username} />
{:catch err}
  <p>加载出错：{err}</p>
{/await}

组件Props类型定义 #

确保UsernameField组件的props类型正确：

<script lang="ts">
  // 明确声明props类型
  export let username: string;
</script>

<input type="text" value={username} readonly />

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