I want to fetch data in my-firestore please what is problem?

× Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

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;

CodePudding user response：

You cannot have your App be async as react-dom does not expect a promise here.

Remove the async keyword from your const App declaration and update to include the API call in useEffect

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;