數據庫未定義 firebase firestore

Question

我要做一個博客網站，可以在網站內保存和發布書面文章。 我正在使用 firebase firestore 將我的數據保存在那里，但唯一的問題是當我運行它時，它說 db 未在 HTMLButtonElement 中定義

HTML

 <script type="module" src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js" ></script> <script type="module" src="https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js" ></script> <script type="module" src="js/editor.js"> firebase.initializeApp({ apiKey: "AIzaSyBbHBS9rdHrbP6g7BG4_kPP9XV1vCiVewU", authDomain: "blog-web-49668.firebaseapp.com", projectId: "blog-web-49668", storageBucket: "blog-web-49668.appspot.com", messagingSenderId: "561111016179", appId: "1:561111016179:web:eef336738659e3fbfb0d86", }); var db = firebase.firestore(); db.settings({ timestampsInSnapshots: true }); </script>

腳本

 publishBtn.addEventListener('click', () => { if (articleField.value.length && blogTitleField.value.length) { // generating id let letters = 'abcdefghijklmnopqrstuvwxyz'; let blogTitle = blogTitleField.value.split("-").join("-"); let id = ''; for (let i = 0; i < 4; i++) { id += letters[Math.floor(Math.random() * letters.length)]; } // setting up docName let docName = `${blogTitle}-${id}`; let date = new Date(); // for published at info //access firestore with db variable; db.collection("blogs").doc(docName).set({ title: blogTitleField.value, article: articleField.value, bannerImage: bannerPath, publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}` }).then(() => { console.log('date entered'); }).catch((err) => { console.error(err); }); } })

Answer 1

您需要從script標簽中刪除src="js/editor.js" ：

<script type="module" src="js/editor.js">
   firebase.initializeApp({...
   // ...
</script>

應該

<script type="module">
   firebase.initializeApp({...
   // ...
</script>

Answer 2

我有同樣的問題，我是這樣解決的

您好，嘗試將這段代碼放在“firebase.js”中：

let firebaseConfig = {
  //your information
  };

 // Initialize Firebase
 firebase.initializeApp(firebaseConfig);

 const db = firebase.firestore();

 export async function insert(item) {
    try {
     const response = await db.collection("blogs").add(item);
     return response;
    } catch (error) {
     throw new Error(error);
      }
 }

 export async function getItems(uid) {
    try {
       let items = [];
       const response = await db
      .collection("blogs")
       .where("userid", "==", uid)
       .get();

       response.forEach(function (item) {
       items.push(item.data());
        });

       return items;
     } catch (error) {
        throw new Error(error);
       }
  }
   
   export async function update(id, completed) {
       try {
          let docId;
          const doc = await db.collection("blogs").where("id", "==", id).get();
          doc.forEach((i) => {
          docId = i.id;
          });

        await db.collection("blogs").doc(docId).update({ completed: completed 
         });
       } catch (error) {
            throw new Error(error);
         }
    }
  export { db };

並在 js 文件中導入：

    import { insert, getItems, update, db } from "./firebase.js";