页面加载时Svelte Store变量为Null的问题咨询

你的核心问题是页面初始化时$currentUser为null，直接调用onSnapshot会因无效UID报错，同时需要实现响应式的实时数据同步，还要避免内存泄漏。下面是可行的解决方案：

正确实现代码 #

<script>
  import { onUnmount } from 'svelte';
  import { currentUser } from './stores.js';
  import { doc, onSnapshot } from 'firebase/firestore';
  import { db } from './firebase.js';

  let profile = null;
  let unsubscribe = null;

  // 响应式监听currentUser变化
  $: if ($currentUser?.uid) {
    // 先取消之前的订阅，防止重复监听
    if (unsubscribe) unsubscribe();
    
    // 启动Firestore实时监听
    unsubscribe = onSnapshot(doc(db, 'users', $currentUser.uid), (snapshot) => {
      profile = snapshot.data();
    });
  } else {
    // 用户未登录或uid不存在时，清空数据并取消订阅
    profile = null;
    if (unsubscribe) {
      unsubscribe();
      unsubscribe = null;
    }
  }

  // 组件卸载时强制清理订阅
  onUnmount(() => {
    if (unsubscribe) unsubscribe();
  });
</script>

<!-- 页面渲染逻辑 -->
{#if profile}
  <div>用户名：{profile.name}</div>
  <!-- 渲染其他用户信息 -->
{:else if $currentUser}
  <div>加载用户资料中...</div>
{:else}
  <div>请先登录</div>
{/if}

关键细节说明 #

1. 可选链保护：用$currentUser?.uid替代直接访问$currentUser.uid，避免null/undefined时的报错。如果环境不支持可选链，可替换为$currentUser && $currentUser.uid。
2. 订阅管理：每次$currentUser变化时，先取消之前的订阅，防止重复监听导致的内存泄漏和数据混乱。
3. 响应式同步：onSnapshot的回调会实时更新profile变量，Svelte会自动触发页面重新渲染。
4. 边界处理：用户登出或currentUser变为null时，主动清空profile并取消订阅，保证状态一致性。

你之前尝试的问题点 #

用Promise包裹onSnapshot的方式不可行，因为onSnapshot是持续监听的，Promise只会resolve一次，无法响应后续的Firestore数据更新，而且没有处理重复订阅的问题，容易导致内存泄漏。

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