未定义集合和 onSnapshot - React

Question

好的，所以我正在学习 React 并尝试使用 firebase/firestore 玩游戏，但由于某种原因它无法识别集合和 onSnapshot

我有以下内容：

firebase.js


import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { doc, onSnapshot, query, where, getFirestore, collection, getDocs } from 'firebase/firestore';

const firebaseConfig = {
...
};

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

export default db;

App.js

import React, { useState, useEffect } from "react";
import db from './firebase.js';

function App() {

useEffect(() => { 
   onSnapshot(collection(db, 'posts'), (snapshot) => { 
       console.log(snapshot); 
   }) 
});

return ( <p>Return Text</p> );

}

export default App;

我在谷歌上搜索并阅读了文档，尝试了很多次后仍然无法正常工作，有什么帮助吗？

尝试使用 Firebase V8 和 V9 代码，期望使用 console.log 获取数据但一无所获，从 firebase.js 导入的数据库似乎有效，因为我可以使用 [=27 查看详细信息=]

Answer 1

您需要在 App.js 而不是 firebase.js 中导入这些函数：

// Add these imports
import { onSnapshot, collection } from 'firebase/firestore';

import React, { useState, useEffect } from "react";
import db from './firebase.js';

function App() {
  useEffect(() => {
    onSnapshot(collection(db, 'posts'), (snapshot) => {
      console.log(snapshot);
    })
  });

  return ( < p > Return Text < /p> );

}

export default App;

未定义集合和 onSnapshot - React

collection and onSnapshot not defined - React

javascript

firebase

reactjs

google-cloud-firestore