Nuxt 异步数据未显示返回数据答案

【问题标题】：Nuxt Async Data not showing return dataNuxt 异步数据未显示返回数据
【发布时间】：2023-04-03 01:47:02
【问题描述】：

我正在使用 Nuxt，建议我们对 SSR 使用异步数据。

我在下面有这段代码：

async asyncData({ params }) {
    console.log("params ...");
    console.log(params.id);
    let asyncDataDescription = "";
    await firebase
      .firestore()
      .collection("posts")
      .where("ytid", "==", params.id)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          asyncDataDescription = doc.data().ytDescription;
        });
        console.log("description ...");
        console.log(asyncDataDescription);
        return { aSyncDescription: asyncDataDescription };
      });
  },

在控制台日志中，我可以看到从 firestore 正确返回的数据，但是当我尝试显示数据时：

<div>{{ aSyncDescription }}</div>

它没有显示。我在这里想念什么吗？讨论异步数据的页面在这里https://nuxtjs.org/api

【问题讨论】：

标签： javascript vue.js google-cloud-firestore nuxt.js

【解决方案1】：

你看到这个.then(querySnapshot => {了吗？

您将结果返回给回调函数。改写成这样

async asyncData({ params }) {
    console.log("params ...");
    console.log(params.id);
    let asyncDataDescription = "";
    let querySnapshot = await firebase
      .firestore()
      .collection("posts")
      .where("ytid", "==", params.id)
      .get()
    querySnapshot.forEach(doc => {
       asyncDataDescription = doc.data().ytDescription;
    });
    console.log("description fdkjfdk");
    console.log(asyncDataDescription);
    return { aSyncDescription: asyncDataDescription };
  },

【讨论】：

明白了，真的很困惑。