React渲染Firestore文档到div时出现Promise子节点报错如何解决

你的代码存在4个核心问题，直接导致报错和渲染失败：

• 直接在JSX渲染位置调用async函数：async函数默认返回Promise对象，React无法直接渲染Promise类型的节点，这就是Objects are not valid as a React child (found: [object Promise])报错的直接来源。
• 异步请求位置错误：数据请求逻辑不能直接写在组件渲染函数中，会引发重复请求、渲染死循环等问题，必须放在副作用钩子里执行，拿到数据后存入组件状态再触发渲染。
• 遍历方法选择错误：forEach没有返回值，就算内部写了JSX节点也不会被收集返回给外层渲染。
• 遍历回调缺少返回值：就算替换了遍历方法，回调内不写return也拿不到需要渲染的节点内容。

用useState存储查询到的条目数据，useEffect在组件挂载时触发Firestore查询，用map代替forEach做列表渲染，记得给每个列表项加唯一key：

import { useState, useEffect } from 'react';
import { collection, query, where, getDocs } from 'firebase/firestore';
// 此处替换为你自己项目中初始化好的db_firestore实例导入
import { db_firestore } from '你的firebase配置文件路径';

function ChatContacts() {
  // 存储查询到的消息列表，初始为空数组
  const [msgList, setMsgList] = useState([]);
  // 可选：加载状态，用于做加载提示
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchFirestoreData = async () => {
      try {
        const docRef = collection(db_firestore, "student@test.de AND otherstudent@test.de");
        const q = query(docRef, where("name", "!=", ""));
        const querySnapshot = await getDocs(q);
        // 整理查询到的文档数据
        const tempList = [];
        querySnapshot.forEach((doc) => {
          tempList.push({
            id: doc.id,
            msg: doc.data().msg
          })
          // 原有调试逻辑保留
          console.log(doc.id, " => ", doc.data());
          console.log(doc.data().msg);
        });
        setMsgList(tempList);
      } catch (err) {
        console.error("Firestore查询失败：", err);
      } finally {
        setLoading(false);
      }
    };

    fetchFirestoreData();
    // 空依赖数组表示仅在组件首次挂载时执行1次查询
  }, []);

  if (loading) return <div>数据加载中...</div>;

  return (
    <div className="main-class">
      {/* 遍历状态数据渲染独立div，每个条目用文档id作为唯一key */}
      {msgList.map((item) => (
        <div key={item.id}>
          <h1>{item.msg}</h1>
        </div>
      ))}
    </div>
  )
}

export default ChatContacts;

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