Reactjs 如何访问子集合中的文档

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

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;

确保用您的实际Firebase配置替换‘Your-Firebase-CONFIG’.如果这不能解决问题，请考虑判断您的FiRestore struct 并相应地调整代码.

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

你可以用递归来解决这个问题，在这里.举个例子:

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>
  );
};