从 CDN JS 导入 firebase firestore 不起作用

2024-04-02

我正在从 CDN 导入 Firebase Firestore 以在本地服务器上运行。我按照文档所述将其导入,就在这里:https://firebase.google.com/docs/web/alt-setup https://firebase.google.com/docs/web/alt-setup

我的代码:

  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';
import { firestore } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js'

问题: Firebase 应用程序和 firebase 身份验证已导入并完美运行,但是 Firestore 未导入。我收到此错误:

Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js' does not provide an export named 'firestore'

这是我的第一个使用 firebase 的 Web 项目,我不知道如何继续前进。这位新手将不胜感激任何帮助或建议。如果您需要更多信息,请告诉我,谢谢。


导入的一种方法是,首先创建一个名为firebase.js并粘贴此代码:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";  
import { getFirestore, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js";

//add your credentials from firebase project
const firebaseConfig = {
  apiKey: "YOUR-apiKey-nCVgNHJXTs",
  authDomain: "YOUR-authDomain.firebaseapp.com",
  projectId: "YOUR-projectId-fb",
  storageBucket: "YOUR-storageBucket-fb.appspot.com",
  messagingSenderId: "YOUR-messagingSenderId",
  appId: "YOUR-appId-web:11c8d54e0"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore();

//create your custom method
export const getWolfs = () => {
  return getDocs(collection(db, "yourNameCollection"));
};

现在,您可以创建一个名为的新文件main.js并粘贴此代码:

import { getWolfs } from './firebase.js';

//suppose you want to display the list of wolves in the browser console
window.addEventListener("DOMContentLoaded", async (e) => {
    const querySnapshot = await getWolfs();
    querySnapshot.forEach((doc) => {
        console.log(doc.data());
    });
});

最后创建html文件索引.html并粘贴此代码:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>firebase</title>
</head>
    <body>
        <h2>wolves</h2>
        <!--main app-->
        <script type="module" src="./main.js"></script>
    </body>
</html>

示例项目:

这就是全部,我希望它对你有用????

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 CDN JS 导入 firebase firestore 不起作用 的相关文章

随机推荐