Блог

Я получаю ошибку типа в моей функции ChatMessage.

Я пробовал несколько разных решений, ни одно из которых не относится к этому конкретному сценарию. Это приложение для чата Firebase, очевидно, не уникальное, но я пытаюсь интегрировать в него TypeScript, все еще изучая и надеясь найти решение, из которого я смогу узнать больше.

App.tsx — это ядро кода

 import './App.css';

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

import { useAuthState } from 'react-firebase-hooks/auth';
import { useCollectionData } from 'react-firebase-hooks/firestore';

firebase.initializeApp ({
    //Removed on stackoverflow for security reasons
})

const auth = firebase.auth();
const firestore = firebase.firestore();

function App() {
  const [user] = useAuthState(auth);

  return (
    <div className="App">
      <header>
        <h1>⚛️🔥💬</h1>
        <SignOut />
      </header>

      <section>
        {user ? <ChatRoom /> : <SignIn />}
      </section>
    </div>
  );
}

function SignIn() {
  const signInWithGoogle = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    auth.signInWithPopup(provider);
  }

  return (
    <>
    <button onClick={signInWithGoogle}>Sign in with Google</button>
    <p>Do not violate the community guidelines or you will be banned for life!</p>
    </>
  )
}

function SignOut() {
  return auth.currentUser amp;amp; (
    <button className="sign-out" onClick={() => auth.signOut()}></button>
  )
}

function ChatRoom() {
  const dummy = useRef<HTMLDivElement>(null);

  const messagesRef = firestore.collection('messages');
  const query = messagesRef.orderBy('createdAt').limit(25);

  const [messages] = useCollectionData(query, {idField: 'id'});

  const [formValue, setFormValue] = useState('');

  const sendMessage = async(e : any) => {
    e.preventDefault();

    const user = auth.currentUser;

    if (user) {
      const { uid, photoURL } = user;

      await messagesRef.add ({
        text: formValue,
        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
        uid,
        photoURL
      });

      setFormValue('');
      dummy.current!.scrollIntoView({ behavior: 'smooth' });
      
    } else {
      //Handle Errors
    }
  };

  return (
    <>
      <main>
        {messages amp;amp; messages.map((msg: any) => <ChatMessage key={msg.id} messsage={msg}/>)}

        <span ref={dummy}></span>
      </main>

      <form onSubmit={sendMessage}>
        <input value={formValue} onChange={(e) => setFormValue(e.target.value)} placeholder="Send Message..."/>
        <button type="submit" disabled={!formValue}>🕊️</button>
      </form>
    </>
  )
}

function ChatMessage(props: any) {
  const { text, uid, photoURL } = props.message;

  const messageClass = uid === auth.currentUser?.uid ? 'sent' : 'received';

  return (
    <>
    <div className={`message ${messageClass}`}>
      <img src={photoURL || 'https://api.hello-avatar.com/adorables/myseed'} />
      <p>{text}</p>
    </div>
    </>
  )
}

export default App;
 

Функция ChatMessage — функция, в которой возникает ошибка (TypeScript не улавливает эту проблему, она возникает только после сборки)

 function ChatMessage(props: any) {
  const { text, uid, photoURL } = props.message;

  const messageClass = uid === auth.currentUser?.uid ? 'sent' : 'received';

  return (
    <>
    <div className={`message ${messageClass}`}>
      <img src={photoURL || 'https://api.hello-avatar.com/adorables/myseed'} />
      <p>{text}</p>
    </div>
    </>
  )
}
 

Ошибка — конкретная ошибка в функции ChatMessage

 TypeError: Cannot destructure property 'text' of 'props.message' as it is undefined.
 

Редактировать 1 — Я полагаю, что ошибка объясняет, что свойство «text» из «props.message» не определено, хотя его тип «любой». Нужно ли мне снова определять это для определенного типа?

Редактировать 2: Решение — в моем скрипте была опечатка. Сообщение было написано «Messsage». Всем спасибо за помощь!

Проблема здесь в том, что вы используете деструктурирование, например

 const {foo} = bar
 

ожидается, что объект bar будет таким, что он состоит из foo поля:

    const bar = {
     foo: ''
  }
 

В вашем случае ваш props.messages объект, похоже, не содержит text поля, поэтому вы получаете сообщение об ошибке

Проблема связана с опечаткой. <ChatMessage key={msg.id} messsage={msg}/>

Это сообщение вместо сообщения. Поэтому, когда вы пытаетесь выполнить деструкцию, оно не найдет свойство message в props.