Svelte中Header组件无法获取用户数据问题求助

问题核心是你没有把父组件（+page.svelte）中的data传递给Header子组件。

Svelte组件的props需要显式传递，父组件的变量不会自动流入子组件。你在Header组件里声明了export let data: PageData，但父组件的<Header />标签没有传入任何数据，所以Header里的data自然是undefined。

修复步骤 #

修改+page.svelte中的Header组件调用代码，把父组件的data传递过去：

<script lang="ts">
// @ts-nocheck
    import Header from '/src/components/Header.svelte';
    import Footer from '/src/components/Footer.svelte';
    import Sponsors from '/src/components/Sponsors.svelte';
    import Image from '/src/components/Image.svelte';
    import type { PageData } from './$types';
    export let data: PageData;
    let innerWidth = 0;
</script>

<!-- 把父组件的data传递给Header组件 -->
<Header {data} />

<p>{data.email}</p>
<!-- 上方p标签可显示登录用户的邮箱 -->

补充说明 #

• {data}是Svelte的简写语法，等价于data={data}，用于将父组件的变量传递给子组件同名props
• 你Header组件中的类型导入import type { PageData } from "../routes/$types";路径是正确的，无需修改，只要父组件传递了data，Header里就能正常访问data.email

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