Next.js中调用Firebase getDoc()后使用map()报TypeError错误求助

核心错误原因 #

• getDoc() 用于获取单个文档的快照，返回的对象没有 docs 属性，你调用 messagesRes.docs.map() 时自然会触发Cannot read properties of undefined (reading 'map')错误。
• 你要获取指定聊天下的消息集合，应该用getDocs()配合查询来获取多文档的集合快照。

修正后的代码 #

import styled from "styled-components";
import Head from "next/head";
import Sidebar from "../components/Sidebar";
import ChatScreen from "../components/ChatScreen";
import { db } from "../../firebase";
// 补充导入getDocs和query
import { collection, doc, orderBy, getDoc, getDocs, query } from "firebase/firestore";

const Chat = () => {
  return (
    <Container className="bg-stone-900">
      <Head></Head>
      <Sidebar />
      <ChatContainer>
        <ChatScreen />
      </ChatContainer>
    </Container>
  );
};

export default Chat;

export async function getServerSideProps(context) {
  // 获取指定chat的文档引用
  const chatRef = doc(db, "chats", context.query.id);
  // 构建messages集合的查询：按timestamp升序排列
  const messagesQuery = query(collection(chatRef, "messages"), orderBy("timestamp", "asc"));
  // 用getDocs获取多文档快照
  const messagesRes = await getDocs(messagesQuery);

  const messages = messagesRes.docs
    .map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }))
    .map((message) => ({
      ...message,
      // 可选链避免timestamp不存在时出错
      timestamp: message.timestamp?.toDate().getTime() || Date.now()
    }));

  // 传入chatRef获取聊天文档数据
  const chatRes = await getDoc(chatRef);
  const chat = {
    id: chatRes.id,
    ...chatRes.data(),
  };

  return {
    props: {
      messages: JSON.stringify(messages),
      chat: chat,
    },
  };
}

const Container = styled.div`
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ChatContainer = styled.div`
  margin: 0 auto;
  overflow: scrollbar;
`;

关键修正点 #

1. 替换getDoc()为getDocs()：获取集合/查询结果必须用getDocs()，它返回的查询快照包含docs数组属性，支持map()遍历。
2. 正确构建查询：用query()函数组合集合引用和排序规则，这是Firestore查询的标准写法。
3. 修复无参数的getDoc()：获取聊天文档时必须传入定义好的chatRef，否则会触发新的错误。
4. 空值防护：给timestamp添加可选链?.，避免部分文档缺少该字段导致报错。

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