英文:
Firestore database in React
问题
我已经尝试了很多次来使这个工作，但总是会出现各种错误。以下是我现在拥有的代码，使用了最新 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
得分: 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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论