从 FireStore 获取数据并将其显示为 HTML答案

【问题标题】：Get data from FireStore and display it as HTML从 FireStore 获取数据并将其显示为 HTML
【发布时间】：2021-08-20 19:55:27
【问题描述】：

我有一个Android app，它创建了一个HTML 代码的帖子我正在尝试在网站上获取此代码并将其显示为网站，但我的网络体验有点平庸，我找不到解决问题的方法我尝试了一个多星期，我认为我必须从头开始学习编程网站才能解决问题。

来自数据库的图像：

这是我尝试过的一些 sn-ps，但没有成功：

<script>
            var  config  = {
              apiKey: "AIzaSyBIlwe_P7Wq**********",
              authDomain: "fir-eivi-27********",
              databaseURL: "https://fir-eivi******",
              projectId: "s-eivi",
              storageBucket: "s-eivi.appspot.com",
              messagingSenderId: "358*****",
              appId: "1:358302572********"
            };

            firebase.initializeApp(config);
            var database = firebase.database();
              var starCountRef = database.ref('post/Tra0bUpkh90c2OSU7OQx/HTML');
                  starCountRef.on('value', function(snapshot) {
                    updateStarCount(postElement, snapshot.val());
                  });

                  // update the UI
                  function updateStarCount(el, val) {
                    el.innerHtml(`${val} post`);
                    consol.log(val);
                  }


</script>

另外，这是从脚本接收文本的正确方法吗：

<p id='starCountRef' class="p-2 row m-0"></p>

【问题讨论】：

标签： javascript html firebase google-cloud-firestore web-deployment

【解决方案1】：

您显示的屏幕截图来自 Cloud Firestore，但您的代码使用 API 访问实时数据库。虽然这两个数据库都是 Firebase 的一部分，但它们是完全独立的，一个数据库的 API 不能与另一个数据库一起使用。

因此，您需要从 Firestore 文档开始，特别是 using realtime listeners to get data and updates 的这一部分。相当于您的数据库代码将是这样的：

const db = firebase.firestore();
db.collection("post").doc("Tra0bUpkh90c2OSU7OQx")
    .onSnapshot((doc) => {
        console.log("Current data: ", doc.data());
        updateStarCount(postElement, doc.data().HTML;
    });

【讨论】：

【解决方案2】：

我发现您错误地编写了“innerHTML”语法。

function updateStarCount(el, val) {
  el.innerHTML = `${val} post`;
  consol.log(val);
}

innerHTML 语法不正确。 innerHTML 不是您必须为其赋值的函数。

【讨论】：