Блог

Я хочу создать клон WhatsApp с помощью next.js в котором я хочу добавить электронное письмо получателя с изображением его профиля в мой раздел чата, но в нем постоянно появляется ошибка, как я упоминал выше в 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 (  lt;Containergt;  {recipient ? (  lt;UserAvtar src={recipient?.photoURL} /gt;  ) : (  lt;UserAvtargt;{recipientEmail[0]}lt;/UserAvtargt;  )}   lt;pgt;{recipientEmail}lt;/pgt;   lt;/Containergt;  )  }  

вот мой 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 = () =gt; {  const input = prompt('enter the email address for the user you wish to chat with');  if(!input) return null;   if(EmailValidator.validate(input) amp;amp; !chatAlreadyExist(input) amp;amp; input !== user.email) {  db.collection('chats').add({  users: [user.email, input],  })  };  }   const chatAlreadyExist = (recipientEmail) =gt;  !!userSnapshot?.docs.find((chat) =gt;  chat.data().users.find((user) =gt; user === recipientEmail)?.length gt; 0  )