使用Mongoose时遇TypeError: models未定义错误的解决求助

这个错误的核心原因是你在客户端组件中直接执行了Mongoose服务端代码：

• Post.watch()是MongoDB变更流操作，属于服务端逻辑，依赖Mongoose的连接和模型初始化，而浏览器环境下无法正确初始化Mongoose的models对象。
• Next.js默认组件是客户端组件，直接在这里调用Mongoose方法会导致未初始化的models引用。

解决方案：将变更流监听移到服务端，通过SSE推送更新 #

1. 创建服务端API路由处理变更流（SSE） #

在app/api/posts/watch/route.js中编写以下代码：

import connectMongo from "@/lib/connectMongo";
import Post from "@/models/postModel";
import { NextResponse } from "next/server";

export async function GET() {
  // 确保先建立MongoDB连接
  await connectMongo();

  // 初始化SSE响应头
  const response = new NextResponse(null, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      "Connection": "keep-alive",
    },
  });

  // 启动变更流监听
  const changeStream = Post.watch();

  // 发送变更事件到客户端
  changeStream.on("change", (changeEvent) => {
    response.write(`data: ${JSON.stringify(changeEvent)}\n\n`);
  });

  // 连接关闭时清理变更流
  response.on("close", () => {
    changeStream.close();
  });

  return response;
}

2. 客户端通过EventSource接收更新 #

在你的客户端组件（比如index.js）中修改useEffect逻辑：

useEffect(() => {
  // 连接到服务端SSE路由
  const eventSource = new EventSource("/api/posts/watch");

  // 接收服务端推送的变更通知
  eventSource.onmessage = (event) => {
    const changeData = JSON.parse(event.data);
    console.log("博客数据更新:", changeData);
    // 这里触发你的博客列表重渲染逻辑，比如重新请求数据
    // 例如：setPosts(await fetchPosts())
  };

  // 组件卸载时关闭连接
  return () => {
    eventSource.close();
  };
}, []);

额外注意事项 #

• 所有Mongoose操作（包括模型初始化、数据库查询、变更流监听）必须在服务端环境执行（API路由、Server Components、Server Actions），客户端只负责UI渲染和与服务端通信。
• 确保调用Post.watch()前已完成MongoDB连接，避免因连接未就绪导致的模型未初始化问题。

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