javascript - FirebaseError：使用无效数据调用函数 Query.where()。不支持的字段值：在 next.js 中未定义

Question

我想在 next.js 的帮助下创建一个 WhatsApp 克隆，我想在我的聊天部分中添加收件人电子邮件及其个人资料图像，但它不断弹出错误，正如我在上面提到的chat.js文件夹中

这是我的chat.js文件夹

import styled from 'styled-components';
import {Avatar} from '@material-ui/core';
import getRecipientEmail from '../utils/getRecipientEmail';
import {auth,db} from '../firebase';
import{useAuthState} from 'react-firebase-hooks/auth';
import {useCollection} from "react-firebase-hooks/firestore";
    
function Chat({id, users}) {
    const [user] = useAuthState(auth);
    
    //here is my error occurs
    const [recipientSnapshot] = useCollection(db.collection('users').where('email', '==', getRecipientEmail(users, user)));
    
    const recipient = recipientSnapshot?.docs?.[0]?.data();
    const recipientEmail = getRecipientEmail(users,user);
    return (
        <Container>
            {recipient ? (
                <UserAvtar src={recipient?.photoURL} />
            ) : (
                <UserAvtar>{recipientEmail[0]}</UserAvtar>
            )} 
            <p>{recipientEmail}</p>  
        </Container>
    ) 
}

这是我的firebase.js

import firebase from "firebase";

const firebaseConfig = {
    apiKey: key,
    authDomain: domain,
    projectId: id,
    storageBucket: bucket,
    messagingSenderId: senderid,
    appId: appid
};

const app= !firebase.apps.length?firebase.initializeApp(firebaseConfig) : firebase.app();
   
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export {db, auth, provider};

这是我的侧边栏组件

import styled from 'styled-components';
import{ Avatar, Button } from '@material-ui/core';
import ChatIcon from '@mui/icons-material/Chat';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import SearchIcon from '@mui/icons-material/Search';
import * as EmailValidator from 'email-validator';
import {auth,db} from '../firebase';
import { useAuthState } from 'react-firebase-hooks/auth';
import {useCollection } from 'react-firebase-hooks/firestore';
import Chat from './Chat'

function Sidebar() {
    const[user] = useAuthState(auth);
    const chatRef = db.collection('chats').where('users', 'array-contains', user.email);
    const[userSnapshot] = useCollection(chatRef);
    const createChat = () => {
        const input = prompt('enter the email address for the user you wish to chat with');
        if(!input) return null;

        if(EmailValidator.validate(input) && !chatAlreadyExist(input) && input !== user.email) {
            db.collection('chats').add({
                users: [user.email, input],
            })
        };
    }

    const chatAlreadyExist = (recipientEmail) =>
        !!userSnapshot?.docs.find((chat) =>
            chat.data().users.find((user) => user === recipientEmail)?.length > 0
        )

标签： javascriptfirebasegoogle-cloud-firestorenext.js