TypeError：类型'Chat'无'date'属性的生产构建问题排查

核心问题 #

你的代码存在三个关键问题，导致生产构建时触发类型错误：

1. Chat接口与实际Firebase数据结构完全不匹配 #

你提供的Firebase聊天数据中，date是顶级属性，但你定义的Chat接口却将date嵌套在userInfo和lastMessage内部，这直接导致类型检查时无法找到Chat.date属性。

2. 状态类型定义错误 #

从Firestore获取的doc.data()是一个键值对对象（键为聊天ID，值为单个聊天记录），但你将chats的类型设为Chat[]（数组），这会导致后续Object.entries(chats)处理时类型混乱，进一步触发错误。

3. 排序逻辑的属性访问路径错误 #

代码中b[1].date - a[1].date的写法，既不符合错误的接口定义，也忽略了date是包含seconds和nanoseconds的对象（不能直接做减法运算）。

解决方案 #

步骤1：修正Chat接口，匹配实际数据结构 #

根据你提供的Firebase数据格式，重新定义接口：

interface Chat {
  date: {
    seconds: number;
    nanoseconds: number;
  };
  lastMessage: {
    texts: string;
  };
  userInfo: {
    uid: string;
    username: string;
    profilePicture: string;
  };
}

步骤2：修正状态类型 #

将chats的类型改为Record<string, Chat>（表示键为字符串、值为Chat对象的字典）：

const [chats, setChats] = useState<Record<string, Chat>>({})

步骤3：修正Firestore数据获取逻辑 #

更新setChats的类型断言，匹配实际返回的数据结构：

setChats(doc.data() as Record<string, Chat>)

步骤4：修正排序与渲染逻辑 #

• 排序时使用date.seconds进行数值比较（因为date是对象，无法直接相减）
• 简化map中的数据访问路径，避免chat[1]这类混乱的写法：

{Object.entries(chats)
  .sort((a, b) => b[1].date.seconds - a[1].date.seconds)
  .map(([chatId, chat]) => (
    <div className="allUsersChat" style={{cursor: "pointer"}} key={chatId} onClick={() => handleSelect(chat.userInfo)} >
      <div style={{backgroundImage: `url(${chat.userInfo.profilePicture})`}} className='profilePic' ></div>
      <div className='chatHeadingCon' >
        <h2>{chat.userInfo.username}</h2>
        {/* 注意：你代码中的`usersAt`属性在数据结构中未定义，若实际存在需补充到Chat接口的userInfo中 */}
        {/* <span>{chat.userInfo?.usersAt}</span> */}
        <p>{chat.lastMessage?.texts?.slice(0, 50)}...</p>
      </div>
    </div>
  ))}

额外提示 #

• 代码中chat.userInfo?.usersAt这个属性在你提供的Firebase数据和接口中都不存在，若实际业务需要该字段，请在Chat.userInfo接口中补充定义。
• 本地开发环境可能因为类型检查严格度较低（比如未启用严格模式）而未报错，但生产构建会启用更严格的类型检查，所以必须保证类型完全匹配。

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