在函数中使用Svelte Store数据遇路由异常问题求助

核心错误原因 #

你的userStore实现中，writable的start函数被定义为async，这违反了Svelte Store的规则：start函数必须同步返回一个清理函数，而async函数会返回Promise，导致Svelte尝试执行这个Promise时抛出stop is not a function错误。

修复后的userStore代码 #

// firebase.js
function userStore() {
  let unsubscribe;
  if (!auth || !globalThis.window) {
    console.warn("Auth is not initialized or not in browser");
    const { subscribe } = writable(null);
    return { subscribe };
  }

  const { subscribe } = writable(auth?.currentUser ?? null, (set) => {
    // 将异步逻辑封装到内部函数，保持start函数同步
    const setupAuthListener = async () => {
      unsubscribe = onAuthStateChanged(auth, async (user) => {
        if (user) {
          const userDocRef = doc(db, "users", user.uid);
          const userDocSnap = await getDoc(userDocRef);
          const userData = userDocSnap.data();
          set(userData);
        } else {
          set(null);
        }
      });
    };

    setupAuthListener();

    // 同步返回清理函数
    return () => {
      if (unsubscribe) {
        unsubscribe();
      }
    };
  });

  return { subscribe };
}
export const user = userStore();

正确使用方式 #

修复Store后，你可以正常使用Svelte的Store语法：

1. 直接使用$user（推荐）
   Svelte会自动处理订阅与取消订阅，无需手动操作：

import { user } from "$lib/firebase";
import { onMount } from 'svelte';

// 组件挂载后调用函数
onMount(() => {
  if ($user) {
    myFunc({ user: $user });
  }
});

// 或使用反应式语句，当user数据变化时自动触发
$: if ($user) {
  myFunc({ user: $user });
}

2. 手动订阅+取消订阅
   现在unsubscribe会返回正确的清理函数，不会再报错：

import { user } from "$lib/firebase";
import { onDestroy } from 'svelte';

let userData;
const unsubscribe = user.subscribe((_userData) => {
  userData = _userData;
});

onDestroy(() => {
  unsubscribe();
});

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