Javascript TypeError:无法分解属性'；文本'；属于'；道具信息'；因为它是未定义的

我的ChatMessage函数中有一个TypeError

我尝试过几种不同的解决方案，没有一种与这种情况相关。这是一个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>⚛️The problem here is when you use destructuring like

const {foo} = bar

import'/App.css'；
从“firebase/app”导入firebase；
导入“firebase/firestore”；
导入“firebase/auth”；
从'react firebase hooks/auth'导入{useAuthState}；
从'react firebase hooks/firestore'导入{useCollectionData}；
firebase.initializeApp({
//出于安全原因，已在stackoverflow上删除
})
const auth=firebase.auth（）；
const firestore=firebase.firestore（）；
函数App（）{
const[user]=useAuthState（auth）；
返回(
⚛️ 这里的问题是当你像这样使用解构时

   const bar = {
     foo: ''
  }

您需要一个条形图对象，以便它由
foo
字段组成：

在您的例子中，您的
props.messages
对象似乎不包含
文本
字段，这就是为什么会出现错误的原因。问题是因为键入错误。

这是信息而不是信息。
因此，当您尝试解构时，它在道具中找不到属性
消息
。
Yep，always！Pro提示-如果出现此类错误，请使用console.log并自行调试。这将节省大量时间。