如何将Firestore数据转为字符串并展示在HTML元素中？

问题根源 #

你当前的代码有两个核心问题：

• doc.data()返回的是JavaScript对象，直接赋值给innerHTML会被强制转为[object Object]，无法正确展示内容，甚至触发错误
• 使用document.getElementById手动操作DOM不符合Svelte的响应式设计，且forEach循环会每次覆盖<p>内容，最终只显示最后一条数据

正确实现方案 #

Svelte推荐用响应式变量结合模板语法渲染数据，无需手动操作DOM。修改步骤如下：

1. 定义响应式变量存储歌曲数据
2. 从Firestore获取数据后，将文档ID和数据整合存入变量
3. 在模板中用{#each}循环渲染所有数据

修改后的完整代码 #

<script>
    import { initializeApp } from "firebase/app";
    import { getAnalytics } from "firebase/analytics";
    import { getFirestore } from "firebase/firestore";
    import { onMount } from 'svelte';
    import { collection, getDocs } from "firebase/firestore"; 

    let db;
    // 定义响应式变量存储歌曲列表
    let songs = [];
    // 加载状态标记
    let isLoading = true;

    onMount(async() => {
        const firebaseConfig = {
          // 你的Firebase配置
        };
      
        const app = initializeApp(firebaseConfig);
        const analytics = getAnalytics(app);
        db = getFirestore(app);
    
        const querySnapshot = await getDocs(collection(db, "songs"));
        // 遍历快照，整合文档ID和数据
        songs = querySnapshot.docs.map(doc => ({
            id: doc.id,
            ...doc.data()
        }));
        isLoading = false;
    });
</script>

<!-- 模板部分：根据状态渲染内容 -->
{#if isLoading}
    <p>LOADING...</p>
{:else}
    <div id="data">
        {#each songs as song}
            <p>
                ID: {song.id}<br>
                名称: {song.name}<br>
                歌手: {song.artist}
                <!-- 根据你实际的字段名调整 -->
            </p>
            <hr>
        {/each}
    </div>
{/if}

关键说明 #

• 用querySnapshot.docs.map()替代forEach，一次性将所有数据存入响应式数组songs，Svelte会自动更新视图
• 模板中用{#if}处理加载状态，{#each}循环渲染每条数据，直接通过变量名访问字段（比如song.name）
• 避免了手动操作DOM的麻烦，完全遵循Svelte的响应式开发模式

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