首先要指出的是， typescript 对我来说是完全新的，仍在工作的React。
所以我现在要做的就是把我从Firestore中查询到的文档中的名字列表Map到网络上。首先我遇到了一个错误，即我的函数中有一个未捕获的查询文档的承诺（特别是在where（）函数中），我检查了很多次，都没有找到这个问题。
第二个也是最令人困惑的问题是，我可以使用console.log来记录子组件中的props，但如果我指定props.title，它会返回为未定义，尽管我可以清楚地看到它以另一种方式显示为正常。
RoomListContainer文件：

const RoomListContainer = (props: Props) => {
    const styles: Styles = {
        container:
            'bg-purple-200 rounded-2xl ml-4 overflow-y-auto overflow-x-hidden scrollbar scrollbar-thumb-purple-500 scrollbar-track-purple-300 hover:scrollbar-thumb-purple-400 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full',
    };

    const [userRooms, setUserRooms] = useState<any>([]);
    const [update, setUpdate] = useState(false);
    const [isLoading, setIsLoading] = useState(true);

    const { currentUser } = useContext(UserContext);

    useEffect(() => {
        return () => {
            GetRooms();
        };
    }, [, update]);

    const refreshRooms = () => {
        setUpdate((prevState) => !prevState);
    };

    const GetRooms = async () => {
        const roomsRef = collection(db, 'Rooms');
        const userRoomsQuery = query(
            roomsRef,
            where('users', 'array-contains', currentUser.uid) // <- Uncaught promise error saying there is undefined data even tho console logging gives me all data just fine
        );
        // console.log(userRoomsQuery);

        const querySnapshot = await getDocs(userRoomsQuery);
        !querySnapshot
            ? console.log('No Data')
            : setUserRooms(querySnapshot.docs.map((doc: any) => doc.id));

        setTimeout(() => setIsLoading(false), 700);
    };

    // console.log(userRooms);
    return (
        <div className={styles.container}>
            {isLoading ? (
                <p>Loading Rooms...</p>
            ) : (
                userRooms.map((room: any) => (
                    <RoomContainer
                        key={Math.random() * 9}
                        data-title={room}
                    />
                ))
            )}
        </div>
    );
};

子组件RoomContainer文件：

const RoomContainer = (props: Props) => {
    const styles: Styles = {
        selectedRoomBG: 'bg-purple-100 w-[100%] flex flex-col transition',
        unselectedRoomBG:
            'bg-purple-200 w-[90%] rounded-r-full flex flex-col mx-auto',
        topPad: 'bg-purple-200 h-[10px] rounded-br-full transition',
        roomTitle: 'ml-2 w-full text-left hover:text-purple-600',
        bottomPad:
            'bg-purple-200 h-[10px] rounded-tr-full transition border-t-2 border-purple-400',
        bottomPadSelected:
            'bg-purple-200 h-[10px] rounded-tr-full border-t-[1px] border-purple-400 transition',
    };

    const [selectedRoom, setSelectedRoom] = useState(false);
    const [roomTitle, setRoomTitle] = useState();

    const selectRoom = () => {
        setSelectedRoom((prevState) => !prevState);
    };

    // const borderDisplay = selectedRoom ? {styles.bottomPadSelected} : {styles.bottomPad};

    const roomDisplay = (
        <div>
            <div className={styles.topPad} />
            <button className={styles.roomTitle}></button>
            <div className={styles.bottomPad} />
        </div>
    );

    console.log(props.title); // <- Comes up undefined
  console.log(props.data-title); // <- Comes up in IDE as not recognized
    console.log(props); // <- Works

    return (
        <div
            className={
                selectedRoom
                    ? styles.selectedRoomBG
                    : styles.unselectedRoomBG
            }
            onClick={selectRoom}
        >
            {roomDisplay}
        </div>
    );
};

export default RoomContainer;

任何关于正在发生的事情的想法或指导将不胜感激！