在React中使用的Firestore数据库

huangapple go评论115阅读模式
英文:

Firestore database in React

问题

我已经尝试了很多次来使这个工作,但总是会出现各种错误。以下是我现在拥有的代码,使用了最新 Firebase 文档中的相同语法。

firebase.js:

  1. import { initializeApp } from 'firebase/app';
  2. import { getFirestore } from 'firebase/firestore';
  3. const firebaseConfig = {
  4. apiKey: "blurred-out",
  5. authDomain: "blurred-out",
  6. projectId: "blurred-out",
  7. storageBucket: "blurred-out",
  8. messagingSenderId: "blurred-out",
  9. appId: "blurred-out"
  10. };
  11. const app = initializeApp(firebaseConfig);
  12. const db = getFirestore(app);
  13. export default db;

App.js:

  1. import db from "./firebase";
  2. const [posts, setPosts] = useState([]);
  3. useEffect(() => {
  4. db.collection('collectionName').onSnapshot((snapshot) =>
  5. setPosts(snapshot.docs.map(doc => doc.data()))
  6. );
  7. }, []);

但仍然会出现以下错误:

`firebase__WEBPACK_IMPORTED_MODULE_4_["default"].collection is not a function. (In 'firebase__WEBPACK_IMPORTED_MODULE_4_["default"].collection("collectionName")', 'firebase__WEBPACK_IMPORTED_MODULE_4_["default"].collection' is undefined)

英文:

I have tried and tried to get this to work, but everything throws one error or another. This is what I have now, written in the same syntax as latest Firebase documentation.

firebase.js:

  1. import { initializeApp } from 'firebase/app';
  2. import { getFirestore } from 'firebase/firestore';
  3. const firebaseConfig = {
  4. apiKey: "blurred-out",
  5. authDomain: "blurred-out",
  6. projectId: "blurred-out",
  7. storageBucket: "blurred-out",
  8. messagingSenderId: "blurred-out",
  9. appId: "blurred-out"
  10. };
  11. const app = initializeApp(firebaseConfig);
  12. const db = getFirestore(app);
  13. export default db;

App.js:

  1. import db from "./firebase";
  2. const [posts, setPosts] = useState([]);
  3. useEffect(() => {
  4. db.collection('collectionName').onSnapshot((snapshot) =>
  5. setPosts(snapshot.docs.map(doc => doc.data()))
  6. );
  7. }, []);

But it still throws this error:

> firebase__WEBPACK_IMPORTED_MODULE_4_["default"].collection is not a function. (In 'firebase__WEBPACK_IMPORTED_MODULE_4_["default"].collection("collectionName")', 'firebase__WEBPACK_IMPORTED_MODULE_4_["default"].collection' is undefined)

答案1

得分: 2

以下是代码的翻译部分:

  1. 尝试这个
  2. import { initializeApp } from 'firebase/app'
  3. import { getFirestore, collection, doc, setDoc } from 'firebase/firestore'
  4. // TODO: 添加您要使用的 Firebase 产品的 SDK
  5. // https://firebase.google.com/docs/web/setup#available-libraries
  6. // 您的 Web 应用的 Firebase 配置
  7. const firebaseConfig = {
  8. apiKey: 'apiKey',
  9. authDomain: 'authDomain',
  10. projectId: 'projectId',
  11. storageBucket: 'storageBucket',
  12. messagingSenderId: 'messagingSenderId',
  13. appId: 'appId'
  14. }
  15. // 初始化 Firebase
  16. export const app = initializeApp(firebaseConfig)
  17. export const db = getFirestore(app)
  18. export const save = async (obj) => {
  19. const coll = collection(db, 'collectionName')
  20. const docRef = doc(coll, 'docName')
  21. await setDoc(docRef, obj)
  22. }
  23. 不要忘记安装 Firebase
  24. npm i firebase
英文:

try this:

  1. import { initializeApp } from 'firebase/app'
  2. import { getFirestore, collection, doc, setDoc } from 'firebase/firestore'
  3. // TODO: Add SDKs for Firebase products that you want to use
  4. // https://firebase.google.com/docs/web/setup#available-libraries
  5. // Your web app's Firebase configuration
  6. const firebaseConfig = {
  7. apiKey: 'apiKey',
  8. authDomain: 'authDomain',
  9. projectId: 'projectId',
  10. storageBucket: 'storageBucket',
  11. messagingSenderId: 'messagingSenderId',
  12. appId: 'appId'
  13. }
  14. // Initialize Firebase
  15. export const app = initializeApp(firebaseConfig)
  16. export const db = getFirestore(app)
  17. export const save = async (obj) => {
  18. const coll = collection(db, 'collectionName')
  19. const docRef = doc(coll, 'docName')
  20. await setDoc(docRef, obj)
  21. }

Don't forget to install firebase:

  1. npm i firebase

huangapple
  • 本文由 发表于 2023年8月10日 21:47:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76876361.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定