Ошибка функции загрузки SvelteKit: должен возвращать простой объект на верхнем уровне

Я не могу заставить функцию загрузки SvelteKit работать при использовании ее с Firebase, я всегда получаю это сообщение об ошибке:

функция загрузки, связанная с маршрутом '/', вернула функцию, но должна вернуть простой объект на верхнем уровне (т.е. return {...})

Я использую onSnapshot здесь с Firestone, чтобы получать обновленные данные всякий раз, когда они изменяются в базе данных.

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;
}
Интеграция Angular - Firebase Analytics
Интеграция Angular - Firebase Analytics
Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.
0
0
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Похоже, ваша проблема заключается в том, что вы возвращаете функцию onSnapshot() внутри функции load. Единственное, что вы можете вернуть внутри метода load, — это простой объект, как указано в ошибке. Возможно, вы захотите запустить код моментального снимка внутри файла onMount.

Другим решением было бы создать стройный магазин и передать onSnapshot в магазин. Пример можно увидеть в этом уроке: https://www.captaincodeman.com/lazy-loading-and-querying-firestore-with-sveltekit#introduction

Ссылка: https://kit.svelte.dev/docs/load

Ваша функция load() должна запускать асинхронный код, поэтому она не может возвращать данные напрямую. Вместо этого вам нужно изменить его, чтобы вернуть обещание, которое разрешается для загруженных данных. Пример использования fetch() см.:

https://kit.svelte.dev/docs/load#making-fetch-requests

В вашем случае вам нужно создать собственное обещание.

Более того, функция load() предназначена для загрузки исходных данных, которые страница должна отображать. Как предложил другой, чтобы подписаться на обновления в будущем, сделайте это в компоненте страницы в onMount(), чтобы вы подписывались на будущие обновления только тогда, когда компонент отображается в веб-браузере.

Другие вопросы по теме