对象作为一个子对象是无效的(found: [object Promise]).在firestore中获取数据

Question

我想在我的firestore中获取数据，请问有什么问题?

x错误:对象不作为React子对象(found: [object:])有效承诺)。如果您打算呈现子集合，请使用数组。

db/index.js

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: 'AIzaSyAdxx_xxxxx',
authDomain: 'xxx',
projectId: 'xxx'
}
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore();
export default db;

app.js

import { collection, getDocs } from 'firebase/firestore';
import db from './db';
import './App.css';
const App = async () => {
const querySnapshot = await getDocs(collection(db, 'cafes'));
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
});
return <h1>Done!</h1>;
};
export default App;

Answer 1

你不能让你的App是异步的，因为react-dom在这里不期望一个承诺。

从您的const App声明中删除async关键字并更新以包含useEffect中的API调用

import React, {useEffect} from 'react';
const App = () => {
useEffect(() => {
// run once async at first render
(async () => {
const querySnapshot = await getDocs(collection(db, 'cafes'));
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
});
})();
}, []);
return <h1>Done!</h1>;
};
export default App;