这是我在没有看到数据的情况下能做的最好的例子

import { useEffect, useState } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { collection, query, where, onSnapshot } from 'firebase/firestore';
import { auth, dataBase } from 'your-firebase-config'; // Replace with your actual Firebase configuration

const YourComponent = () => {
  const [chatRoomData, setChatRoomData] = useState([]);
  const [firebaseUserInfo, setFirebaseUserInfo] = useState(auth.currentUser);

  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
        setFirebaseUserInfo(currentUser);

        const messagesCollectionRef = collection(dataBase, "ChatRooms"); // Assuming "ChatRooms" is your collection
        const queryChatRooms = query(messagesCollectionRef, where("uid", "==", currentUser.uid));

        const unSubscribe = onSnapshot(queryChatRooms, (snapshot) => {
          const chatRooms = [];
          snapshot.forEach((doc) => {
            const messagesSubcollectionRef = collection(doc.ref, "messages");
            const queryMessages = query(messagesSubcollectionRef, where("uid", "==", currentUser.uid));

            onSnapshot(queryMessages, (messagesSnapshot) => {
              messagesSnapshot.forEach((messageDoc) => {
                chatRooms.push({ chatRoom: messageDoc.data().room, id: messageDoc.id });
              });

              setChatRoomData(chatRooms);
            });
          });
        });

        return () => unSubscribe();
      }
    });
  }, []);

  return (
    <>
      <div className="chats-container">
        <header className="header-container">
          <h1 className="header">Your Chats</h1>
        </header>
        {chatRoomData.map((data) => (
          <div className="users-chatRooms-container" key={data.id}>
            <button className="users-chatRooms">{data.chatRoom}</button>
          </div>
        ))}
      </div>
    </>
  );
};

export default YourComponent;

字符串
请确保将'your-firebase-config'替换为实际的Firebase配置。如果这不能解决问题，请考虑检查Firestore结构并相应地调整代码。

或者如果问题只是打印下一个对象

你可以用递归来解决这个问题，这里有一个例子：

const RecursivePrint = ({ data }) => {
  return (
    <div>
      {Object.keys(data).map((key) => {
        const value = data[key];

        if (typeof value === 'object' && value !== null) {
          return (
            <div key={key}>
              <strong>{key}:</strong>
              <RecursivePrint data={value} />
            </div>
          );
        } else {
          return (
            <div key={key}>
              <strong>{key}:</strong> {value}
            </div>
          );
        }
      })}
    </div>
  );
};

// Example usage:
const data = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Cityville',
  },
};

const App = () => {
  return (
    <div>
      <h1>Recursive Print Example</h1>
      <RecursivePrint data={data} />
    </div>
  );
};

型

你需要引用每个“room”文档，然后访问它的“messages”子集合。另外，确保你使用了正确的字段名称。尝试以下代码：

import { useState, useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import {
  collection,
  query,
  where,
  getDocs,
  onSnapshot,
} from 'firebase/firestore';
import { auth, dataBase } from 'your-firebase-config-file'; 
 // Import your Firebase configuration

function YourComponent() {
  const [chatRoomData, setChatRoomData] = useState([]);
  const [firebaseUserInfo, setFirebaseUserInfo] = useState(auth.currentUser);

  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      setFirebaseUserInfo(currentUser);

      const chatRoomCollectionRef = collection(dataBase, 'ChatRooms');
      const queryChatRooms = query(chatRoomCollectionRef, where('uid', '==', currentUser.uid));

      const unSubscribe = onSnapshot(queryChatRooms, (snapshot) => {
        const chatRooms = [];
        snapshot.forEach(async (doc) => {
          const messagesQuerySnapshot = await getDocs(collection(doc.ref, 'messages'));
          messagesQuerySnapshot.forEach((messageDoc) => {
            chatRooms.push({
              chatRoom: messageDoc.data().room,
              id: messageDoc.id,
            });
          });
        });
        setChatRoomData(chatRooms);
      });

      return () => unSubscribe();
    });
  }, []);

  return (
    <>
      <div className="chats-container">
        <header className="header-container">
          <h1 className="header">Your Chats</h1>
        </header>
        {chatRoomData.map((data) => (
          <div className="users-chatRooms-container" key={data.id}>
            <button className="users-chatRooms">{data.chatRoom}</button>
          </div>
        ))}
      </div>
    </>
  );
}

export default YourComponent;

字符串
请务必根据原计划调整进口报表。如有疑问，请咨询。