React可完整显示Firestore数组，但无法读取单个属性，原因何在？

你的代码存在三个核心问题导致documente.title显示undefined：

1. useState使用方式错误 #

useState返回的是包含状态值和状态更新函数的数组，你直接把整个返回值赋值给documente，导致documente并不是单纯的数组，而是[数组, 更新函数]的结构，后续的push操作完全不符合React状态管理规范。

正确写法需解构出状态和更新函数：

const [documente, setDocumente] = useState([])

2. 直接修改状态数组 #

React状态是不可变的，不能用documente.push()直接修改状态数组，必须通过setDocumente来更新状态。建议先收集所有文档数据，再一次性更新状态。

3. 错误访问数组属性 #

documente是数组，数组本身没有title属性，你需要访问数组中单个元素的title，比如遍历过程中打印当前元素的title，或后续遍历数组时逐个访问。

修正后的完整代码 #

import React, { useEffect, useState } from 'react'
import { Button, Container } from 'react-bootstrap'
import '../components/Inbox.css'
import Sidebar from "../components/sidebar"
import { collection, query, where, getDocs, setDoc, doc } from 'firebase/firestore'
import { db } from '../firebase'
import { useAuth } from '../contexts/AuthContext'
import { Link } from 'react-router-dom'

function Inbox() {

  const { currentUser } = useAuth()
  const [documente, setDocumente] = useState([]) // 修正useState使用方式

  async function emails() {
    try {
      const querySnapshot = await getDocs(query(collection(db, 'mails'), where('recipient', '==', currentUser.email)))
      // 先收集所有邮件数据
      const mailList = []
      querySnapshot.forEach((doc) => {
        const mailData = {
          id: doc.id,
          title: doc.data().title,
          sender: doc.data().sender
        }
        mailList.push(mailData)
        console.log(mailData.title) // 打印单个邮件的title
      })
      // 一次性更新状态
      setDocumente(mailList)
      // 遍历数组打印所有邮件title
      mailList.forEach(mail => console.log(mail.title))
    } catch {
      console.log('no work')
    }
  }

  useEffect(() => { emails() }, [currentUser.email]) // 添加依赖项，确保用户邮箱变化时重新获取数据

  return (
    <>
      <Sidebar />
      {/* 渲染邮件列表示例 */}
      {documente.map(mail => (
        <div key={mail.id} className="mail-item">
          <h3>{mail.title}</h3>
          <p>发件人: {mail.sender}</p>
        </div>
      ))}
    </>
  )
}

export default Inbox

额外优化说明 #

• 移除了不必要的AuthProvider嵌套（组件内已用useAuth，说明外层已有该Provider）
• 在useEffect依赖数组中添加currentUser.email，避免过时数据或重复请求
• 添加了邮件列表渲染示例，可直接用于展示获取到的数据

内容的提问来源于stack exchange，提问作者user21244553