javascript - TypeError: No se puede desestructurar la propiedad 'text' de 'props.message' ya que está indefinida

Estoy recibiendo un TypeError en mi función ChatMessage.

He probado algunas soluciones diferentes, ninguna relacionada con este escenario exacto. Esta es una aplicación de chat de Firebase, obviamente no es única, pero estoy intentando integrar TypeScript en esto, todavía estoy aprendiendo y espero encontrar una solución de la que pueda aprender más.

App.tsx - este es el núcleo del código

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 && (
    <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 && 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;

Función ChatMessage - la función donde ocurre el error (TypeScript no detecta este problema, solo ocurre después de la compilación)

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>
    </>
  )
}

Error - el error específico en la función ChatMessage

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

Edición 1 - Creo que el error indica que la propiedad "text" de "props.message" no está definida, aunque su tipo sea "any". ¿Necesitaría definirla nuevamente a un tipo específico?

Edición 2: Solución - Había un error tipográfico en mi script. El mensaje estaba escrito como "Messsage". ¡Gracias por su ayuda a todos!

Respuesta #1

El problema aquí es cuando usas desestructuración como

const {foo} = bar

se espera que tengas un objeto bar que consista en un campo foo:

   const bar = {
     foo: ''
  }

En su caso, su objeto props.messages no parece contener un campo text, por eso está recibiendo el error

Respuesta #2

El problema es debido a un error tipográfico. <ChatMessage key={msg.id} messsage={msg}/>

Es messsage en lugar de message. Así que cuando intentas desestructurar, no encontrará la propiedad message en props.