React(TypeScript)子组件props未定义及Firestore查询异常求助

问题1：Firestore查询出现未捕获Promise错误 #

原因分析 #

1. useEffect的返回值是组件卸载/依赖变更时执行的清理函数，你把GetRooms()放在了清理函数里，导致首次挂载时不会触发查询，反而在组件卸载时才执行，且异步函数未做错误捕获。
2. currentUser可能处于未初始化状态（比如上下文还没加载完成），直接访问currentUser.uid会抛出未捕获错误。
3. 异步函数GetRooms没有用try/catch包裹，Promise错误无法被捕获。

修正方案 #

// 修改RoomListContainer中的useEffect和GetRooms函数
useEffect(() => {
    GetRooms();
}, [update]); // 移除依赖数组里的多余逗号

const GetRooms = async () => {
    if (!currentUser) {
        console.log("用户未登录");
        setIsLoading(false);
        return;
    }
    try {
        const roomsRef = collection(db, 'Rooms');
        const userRoomsQuery = query(
            roomsRef,
            where('users', 'array-contains', currentUser.uid)
        );
        const querySnapshot = await getDocs(userRoomsQuery);
        setUserRooms(querySnapshot.docs.map(doc => doc.id));
    } catch (error) {
        console.error("查询房间失败:", error);
    } finally {
        setTimeout(() => setIsLoading(false), 700);
    }
};

问题2：子组件RoomContainer中props.title返回undefined #

原因分析 #

父组件传递的data-title是HTML标准的data-*属性，在React组件props中，这类属性会被转换为驼峰命名的dataTitle，或者需要通过props['data-title']访问，但更规范的做法是使用普通props命名。

修正方案 #

1. 父组件修改props命名：

// RoomListContainer中渲染RoomContainer的部分
userRooms.map((room: any) => (
    <RoomContainer
        key={room} // 不要用随机数当key，用唯一的room id更可靠
        title={room}
    />
))

2. 子组件直接访问props.title：

// RoomContainer中
console.log(props.title); // 现在可以正常获取值
// 同时更新Props类型定义，确保包含title字段
interface Props {
    title: string;
}

额外提示：不要用Math.random() * 9作为组件key，这会导致每次渲染生成新key，引发不必要的组件重渲染，直接用唯一的room id作为key即可。

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