React中如何使用where条件查询Firebase Realtime Database单条数据

你当前代码存在的核心错误： #

• 查询字段路径错误：orderByChild(${id}/email)写法错误，你要匹配所有用户节点下的email字段，直接传email作为参数即可，不需要拼接id
• 匹配值错误：你要筛选邮箱，equalTo应该传session.user.email而不是session.user.name
• 未导入useEffect：代码中使用了useEffect但没有从react包导入
• 冗余导入：useCollection是Firestore的钩子，你用的是Realtime Database，不需要这个导入
• 变量未定义：recepitantSnapshot没有声明就直接打印，会报错

修正后的完整代码： #

import { useEffect, useState } from 'react';
import { db, storage } from "../../firebases";
import { useRouter }  from 'next/router';
import firebase from 'firebase';

const Chats = ({id, users, session}) => {
    const router = useRouter();
    // 可以用state存匹配到的用户数据方便渲染用
    const [matchedUser, setMatchedUser] = useState(null);

    useEffect(() => {
        // 正确的查询：查询users下所有子节点的email字段，匹配目标邮箱
        const userRef = firebase.database().ref('users').orderByChild('email').equalTo(session.user.email);
        userRef.once('value', (snapshot) => {
            // 邮箱是唯一的，查询结果只会有一条
            if (snapshot.exists()) {
                const userData = Object.values(snapshot.val())[0];
                setMatchedUser(userData);
                console.log("匹配到的用户数据：", userData);
            } else {
                console.log("未找到匹配的用户");
            }
        })
    }, [session.user.email])

    const enterChat = () => {
        // router.push(`/chat/${id}`);
    }

    return(
        <>
        <div className="flex items-center cursor-pointer p-2">
            <div className="m-1 mr-2 w-3" onClick={enterChat}>
                {/* <img src={matchedUser?.profile} alt="用户头像"></img> */}
            </div>
            {/* <p>{matchedUser?.name}</p> */}
        </div>
        </>
    )
}
export default Chats;

额外注意点： #

• 如果后续要频繁使用这个查询，建议在Firebase控制台给Realtime Database的users节点的email字段添加索引，避免后续出现查询性能问题或者权限警告
• snapshot.val()返回的是键值对格式，键是用户的唯一id（比如示例里的-MoZJ7ZnwvhQ6I8_M7N8），所以用Object.values取第一个值就能拿到匹配的用户完整数据

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