英文:

Firestore database in React

问题 {#heading}

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

firebase.js：

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

const firebaseConfig = {
  apiKey: "blurred-out",
  authDomain: "blurred-out",
  projectId: "blurred-out",
  storageBucket: "blurred-out",
  messagingSenderId: "blurred-out",
  appId: "blurred-out"
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

export default db;

App.js：

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

但仍然会出现以下错误：

`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:

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

const firebaseConfig = {
apiKey: \"blurred-out\",
authDomain: \"blurred-out\",
projectId: \"blurred-out\",
storageBucket: \"blurred-out\",
messagingSenderId: \"blurred-out\",
appId: \"blurred-out\"
};


const app = initializeApp(firebaseConfig);


const db = getFirestore(app);

`export default db;
`

App.js:

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

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 {#1}

得分: 2

以下是代码的翻译部分：

尝试这个：

    import { initializeApp } from 'firebase/app'
    import { getFirestore, collection, doc, setDoc } from 'firebase/firestore'
    // TODO: 添加您要使用的 Firebase 产品的 SDK
    // https://firebase.google.com/docs/web/setup#available-libraries
    // 您的 Web 应用的 Firebase 配置
    const firebaseConfig = {
      apiKey: 'apiKey',
      authDomain: 'authDomain',
      projectId: 'projectId',
      storageBucket: 'storageBucket',
      messagingSenderId: 'messagingSenderId',
      appId: 'appId'
    }
    
    // 初始化 Firebase
    export const app = initializeApp(firebaseConfig)
    export const db = getFirestore(app)

    export const save = async (obj) => {
      const coll = collection(db, 'collectionName')
      const docRef = doc(coll, 'docName')
      await setDoc(docRef, obj)
    }

不要忘记安装 Firebase：

    npm i firebase

英文:

try this:

import { initializeApp } from 'firebase/app'
import { getFirestore, collection, doc, setDoc } from 'firebase/firestore'
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: 'apiKey',
  authDomain: 'authDomain',
  projectId: 'projectId',
  storageBucket: 'storageBucket',
  messagingSenderId: 'messagingSenderId',
  appId: 'appId'
}

// Initialize Firebase
export const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)

`export const save = async (obj) => {
const coll = collection(db, 'collectionName')
const docRef = doc(coll, 'docName')
await setDoc(docRef, obj)
}
`

Don't forget to install firebase:

npm i firebase