SvelteKit load函数搭配Firebase报错：需返回顶层普通对象

问题原因 #

你触发错误的核心原因是：

• SvelteKit的load函数要求顶层必须直接返回普通对象，但你现在返回的是Firestore onSnapshot返回的取消订阅函数，不符合规则。
• 另外，onSnapshot是异步监听回调，你在回调里返回数据的写法根本没法把数据传递给组件，load函数不会等待这个回调执行。

正确解决方案 #

要实现「初始数据加载+实时更新」，需要把逻辑拆成两部分：

1. 在load函数里用getDocs获取初始数据，满足load的返回要求；
2. 在页面组件内部使用onSnapshot监听数据变化，更新组件状态，并在组件销毁时取消订阅。

修改后的load函数代码 #

import { getDocs, query, collection, orderBy } from "firebase/firestore";
import { db } from '$lib/firebase'; // 替换成你的firebase配置路径

export async function load() {  
    const queryParams = [orderBy('date')];
    const q = query(collection(db, 'daily_status'), ...queryParams);
    
    // 用getDocs获取初始数据，返回Promise符合load函数要求
    const querySnapshot = await getDocs(q);
    const data = querySnapshot.docs.map(doc => ({
        id: doc.id, 
        status: doc.data().status, 
        date: doc.data().date.toDate().toLocaleDateString('en-au'),
        note: doc.data().note
    }));

    // 顶层返回普通对象，满足load函数规则
    return { daily_status: data };
}

页面组件内部的实时监听代码 #

<script>
    import { onMount, onDestroy } from 'svelte';
    import { query, collection, orderBy, onSnapshot } from "firebase/firestore";
    import { db } from '$lib/firebase';

    // 接收load函数传递的初始数据
    export let data;
    let dailyStatus = data.daily_status;
    let unsubscribe;

    onMount(() => {
        const queryParams = [orderBy('date')];
        const q = query(collection(db, 'daily_status'), ...queryParams);
        
        // 组件挂载后开始监听数据变化
        unsubscribe = onSnapshot(q, (querySnapshot) => {
            const updatedData = querySnapshot.docs.map(doc => ({
                id: doc.id, 
                status: doc.data().status, 
                date: doc.data().date.toDate().toLocaleDateString('en-au'),
                note: doc.data().note
            }));
            // 更新组件状态，触发页面重新渲染
            dailyStatus = updatedData;
        });
    });

    onDestroy(() => {
        // 组件销毁时取消订阅，避免内存泄漏
        if (unsubscribe) unsubscribe();
    });
</script>

<!-- 用dailyStatus渲染页面内容 -->
<div>
    {#each dailyStatus as item}
        <div key={item.id}>
            <p>{item.date}: {item.status}</p>
            {#if item.note}
                <p>{item.note}</p>
            {/if}
        </div>
    {/each}
</div>

额外说明 #

• load函数的设计目的是获取初始数据，支持服务端渲染/静态生成，不适合处理实时监听这类持续运行的逻辑；
• 在组件内部用onMount和onDestroy管理订阅生命周期，能避免不必要的资源消耗和内存泄漏；
• 你之前代码里的JSON.parse(JSON.stringify(...))是多余的，直接解构doc的数据即可，不需要额外序列化再解析。

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