Svelte中实现Firebase数据变更的响应式更新求助

我是从iOS开发转过来的Svelte新手，正在开发一个简易应用。目前代码能从Firebase数据库获取初始值，并用svelte-persisted-store持久化，但Firebase数据变更时页面无法自动更新，尝试实现响应式操作还会导致应用崩溃。现有三个文件：getter.js、persistedStore.js和+page.svelte，想请教如何正确使用subscribe实现响应式更新。

getter.js

import { assignedUser } from "@stores/persistedStore";

async function getUser(thisUser) {
    const docRef = doc(db, "userData", thisUser);
    const userSnapshot = await getDoc(docRef);
    const theUser = userSnapshot.data();

    assignedUser.set({
        theUser
    })
}

export { getUser };

persistedStore.js

import { persisted } from 'svelte-persisted-store'

// single user details
export const assignedUser = persisted('assignedUser', {})

+page.svelte

<script>
import { get } from 'svelte/store' 
import { assignedUser } from "@stores/persistedStore";

const singleUser = get(assignedUser);
</script>

<div>{singleUser.theUser.userWeight}</div>

当前代码能正常展示用户体重并跨页面持久化，但需要实现无需刷新页面的响应式更新，恳请指点正确实现方式。

1. 页面端实现响应式：用Svelte自动订阅语法 #

你现在用get(assignedUser)只能获取store的当前值，是一次性的，不会监听后续变化。Svelte提供了更简便的自动订阅语法$store，能自动响应store的更新，不用手动写subscribe。

修改+page.svelte：

<script>
import { assignedUser } from "@stores/persistedStore";
// 去掉get()，直接在模板里用$assignedUser
</script>

<!-- 加?.可选链，避免初始store为空时报错 -->
<div>{$assignedUser.theUser?.userWeight}</div>

2. Firebase端添加实时监听：用onSnapshot替代getDoc #

原来的getUser只用getDoc只能获取一次数据，要实现Firebase数据变更时自动更新，需要用onSnapshot监听文档的实时变化，每次数据更新就同步到store。

修改getter.js：

import { assignedUser } from "@stores/persistedStore";

function getUser(thisUser) {
    const docRef = doc(db, "userData", thisUser);
    // 用onSnapshot监听实时变化，返回取消订阅的函数
    const unsubscribe = onSnapshot(docRef, (userSnapshot) => {
        const theUser = userSnapshot.data();
        assignedUser.set({ theUser });
    });
    // 返回取消订阅函数，方便组件销毁时清理
    return unsubscribe;
}

export { getUser };

3. 组件内清理监听（避免内存泄漏） #

如果在页面组件里调用getUser，记得在组件销毁时取消Firebase的监听，防止内存泄漏。比如在+page.svelte里：

<script>
import { onMount, onDestroy } from 'svelte';
import { assignedUser } from "@stores/persistedStore";
import { getUser } from "@path/to/getter.js";

let unsubscribe;

onMount(() => {
    // 假设thisUser是当前用户ID，替换成你的实际值
    const thisUser = "当前用户ID";
    unsubscribe = getUser(thisUser);
});

onDestroy(() => {
    // 组件销毁时取消监听
    unsubscribe?.();
});
</script>

<div>{$assignedUser.theUser?.userWeight}</div>

关键说明 #

• Svelte的$store语法是语法糖，会自动帮你完成subscribe和unsubscribe，是最推荐的响应式用法。
• Firebase的onSnapshot会在文档创建、更新、删除时触发回调，实时同步数据到store后，页面会自动更新。
• 一定要记得取消Firebase的监听，否则组件销毁后监听还存在，会导致内存泄漏和不必要的资源消耗。

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