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