firebase SvelteKit加载功能错误:必须返回顶级的普通对象

zmeyuzjn  于 2023-02-05  发布在  其他
关注(0)|答案(2)|浏览(133)

我无法让SvelteKit加载功能工作时,使用它与Firebase,我总是得到这个错误消息:
与路由“/”相关的加载函数返回了一个函数,但必须返回顶级的普通对象(即return {...}
我在这里使用onSnapshot和凡士通,以便在数据库中发生更改时获取更新的数据。

export function load() {  
    const queryParams = [orderBy('date')];
    const q = query(collection(db, 'daily_status'), ...queryParams);
    
    messagesUnsubscribeCallback = onSnapshot(
        q,
        querySnapshot => {
            let data = querySnapshot.docs.map( doc => (
                JSON.parse(JSON.stringify(
                    {
                        id: doc.id, 
                        status: doc.data().status, 
                        date: doc.data().date.toDate().toLocaleDateString('en-au'),
                        note: doc.data().note
                    } 
                ))
            ))
        return { daily_status: data }
    })
    return messagesUnsubscribeCallback;
}
jhdbpxl9

jhdbpxl91#

看起来您的问题是在load函数中返回函数onSnapshot()。在load方法中唯一可以返回的是一个普通对象,如错误所述。您可能需要在onMount中运行快照代码。
另一个解决方案是创建一个svelte存储,并将onSnapshot传递到存储中。https://www.captaincodeman.com/lazy-loading-and-querying-firestore-with-sveltekit#introduction
参考:https://kit.svelte.dev/docs/load

whhtz7ly

whhtz7ly2#

您的load()函数需要运行异步代码,因此它不能直接返回数据。相反,您需要更改它以返回解析为加载数据的承诺。有关使用fetch()的示例,请参阅:
https://kit.svelte.dev/docs/load#making-fetch-requests
在你的情况下,你需要创造你自己的承诺。
此外,load()函数的用途是加载页面能够呈现的初始数据,正如另一个函数所建议的,要订阅将来的更新,请在onMount()中的页面组件中执行此操作,这样,只有在Web浏览器中呈现组件时,才订阅将来的更新。

相关问题