获取加载失败：尝试将文档添加到 Firestore、Nuxt3 时获取 [...]

Question

我正在尝试使用 Firebase 模块化 Web SKD 将文档保存到我的 Firestore 数据库中：

 const app = initializeApp(
    {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
    },
    "add-attraction"
  );

  const db = getFirestore(app);

    async function addAttraction() {
    console.log("Saving");

    const activity = {
       foo: bar,  
    };
    try {
      const docRef = await addDoc(collection(db, "activities"), activity);
      console.log("Document written with ID: ", docRef.id);
    } catch (error) {
      console.error("Error adding attraction:", error);
    }
  }

但是我在浏览器控制台中遇到奇怪的错误：

提到的210行是

const docRef = await addDoc(collection(db, "activities"), activity);

有人知道导致错误的原因以及我做错了什么吗？我已经考虑过我的 Firestore 中的一些权限问题，但我使用“非生产”模式，据我所知，它允许每个人连接，对吗？

Answer 1

首先，我不太确定你是如何获得这些控制台日志的。您是否尝试过为 Firestore 启用详细日志记录以获取有关问题可能原因的更多信息？

这是我使用 JS Web 模块化 API 初始化 Firebase 并在我的 nuxt 应用程序中使用 Firestore 所做的事情：

在

useFirebaseClient.ts

目录下创建了一个名为

composables

的文件来初始化 Firebase 和 Firestore 实例：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

export const useFirebaseClient = () => {
    const firebaseConfig = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "..."
    };

    const firebaseApp = initializeApp(firebaseConfig);
    const firestore = getFirestore(firebaseApp);

    return {
        firestore
    }
}

在组件或

app.vue

文件中，使用以下命令将数据写入 Firestore：

<script setup>

  import { collection, addDoc } from "firebase/firestore";

  const writeData = async () => {
    const { firestore } = useFirebaseClient();
    const docRef = await addDoc(collection(firestore, "cities"), {
      name: "Tokyo",
      country: "Japan"
    });
    console.log("Document written with ID: ", docRef.id);
  }

</script>

<template>
  <div>
    <button @click="writeData">Write Data</button>  
  </div>
</template>

请注意，

useFirebaseClient()

是为初始化 Firebase 和 Firestore 实例而创建的可组合项。