React调用Firestore拉取数据报Objects are not valid as a React child问题咨询

• 你直接将App组件声明为了async函数，所有async函数执行后默认返回Promise对象，而React无法直接将Promise作为组件返回值渲染，这就是报错提示中found: [object Promise]的根本原因。
• React组件的渲染逻辑是同步的，不支持直接在组件顶层写await等待异步请求结果。

使用React内置的useEffect钩子触发异步请求，配合useState管理请求状态和返回结果即可，修正步骤如下：

1. 引入useState、useEffect两个React钩子
2. 将Firestore请求逻辑放到useEffect回调中，单独声明异步请求函数执行await逻辑
3. 可根据需要添加加载状态、错误状态处理，提升用户体验

import { useState, useEffect } from 'react';
import { collection, getDocs } from 'firebase/firestore';
import db from './db';
import './App.css';

const App = () => {
  // 定义请求状态、错误信息、返回数据三个状态变量
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [cafes, setCafes] = useState([]);

  useEffect(() => {
    // 单独声明异步函数执行Firestore请求
    const fetchCafes = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, 'cafes'));
        const cafesList = [];
        querySnapshot.forEach((doc) => {
          cafesList.push({
            id: doc.id,
            ...doc.data()
          });
          // 原写法直接拼接doc.data()会打印[object Object]，改成逗号分开打印即可正常查看内容
          console.log(`${doc.id} => `, doc.data());
        });
        setCafes(cafesList);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchCafes();
  }, []); // 空依赖数组保证请求只在组件挂载时执行一次

  if (loading) return <h1>加载中...</h1>;
  if (error) return <h1>请求出错：{error}</h1>;

  return (
    <div>
      <h1>Done!</h1>
      {/* 后续可直接遍历cafes数组渲染门店列表，替换为你实际的字段名即可 */}
      <ul>
        {cafes.map(cafe => (
          <li key={cafe.id}>{cafe.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Ahmed Habib