Svelte技术问询：如何从导入的数据组件中使用$ArrayCall数据

核心问题分析 #

你现在的问题出在store的导出方式和代码里的小bug：

• 用export let ArrayCall会把它当成组件的props，而非全局可导入的store实例，所以前端组件导入后会拿到undefined
• 你在onSnapshot的forEach循环里每次都调用ArrayCall.set(Array)，这会导致store只保留最后一条数据，应该等所有数据push完再统一set

修正数据组件代码 #

先把数据组件改成正确的store导出方式，并修复数据更新的bug：

<script>
    import { writable, onDestroy } from "svelte/store";

    // 导入Firebase相关模块
    import { initializeApp } from "firebase/app";
    import { getFirestore, collection, onSnapshot } from "firebase/firestore";
    import { firebaseConfig } from '/Firebase.js';

    // 初始化Firebase
    const firebaseApp = initializeApp(firebaseConfig);
    const db = getFirestore();
    const docRef = collection(db, "Forecaster_init");

    // 正确导出store：用export const，初始值设为空数组
    export const ArrayCall = writable([]);

    // 订阅Firestore数据，把set放在forEach外面确保数据完整
    const unsubscribe = onSnapshot(docRef, (querySnapshot) => {
        const arrayData = [];
        querySnapshot.forEach((doc) => {
            const { cardCreated, titleCard } = doc.data();
            arrayData.push({
                id: doc.id,
                cardCreated,
                titleCard,
            });
        });
        // 所有数据收集完再更新store
        ArrayCall.set(arrayData);
    });

    // 组件销毁时取消Firestore订阅，防止内存泄漏
    onDestroy(() => {
        unsubscribe();
    });
</script>

<!-- 组件内部可保留这段调试代码，不需要也可以删除 -->
{#each $ArrayCall as { titleCard }}
    {console.log('Data :', titleCard)}
{/each}

前端组件导入使用 #

现在前端组件可以直接导入这个store，不用重复定义变量，直接用$ArrayCall访问数据：

<script>
    // 替换成你的数据组件文件名
    import { ArrayCall } from './DataComponent.svelte';
</script>

{#each $ArrayCall as item}
    <div class="addList2">
        {item.id} -- {item.titleCard}
    </div>
{/each}

关键说明 #

• 用export const导出store：这样导出的是固定的store实例，所有导入的组件共享同一个数据源，不会出现undefined
• 清理Firestore订阅：用onDestroy调用unsubscribe能避免组件销毁后仍保持连接，减少内存浪费
• 初始值设为空数组：避免初始状态下$ArrayCall是数字类型，导致forEach遍历报错

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