NextJS + Mongoose报错：Cannot read properties of null (reading 'get')求助

问题详情 #

我是新手开发者，在开发NextJS + Mongoose项目时，客户端抛出以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'get')

报错栈指向Schema定义的setupTimestamps环节。后端运行正常，客户端已成功获取数据，但仍触发该错误。

相关代码 #

Task Schema代码

import { Schema, model, models } from "mongoose";

const taskSchema = new Schema(
  {
    title: {
      type: String,
      required: [true, "The Task title is required "],
      unique: true,
      trim: true,
      maxlength: [40, "title cannot be grater than 40 characters"],
    },
    description: {
      type: String,
      required: true,
      trim: true,
      maxlength: [200, "title cannot be grater than 200 characters"],
    },
  },
  {
    timestamps: true,
    versionKey: false
  }
)

export default models.Task || model("Task", taskSchema);

前端HomePage组件代码

import { Button, Card, CardHeader, Container, Divider, Grid } from "semantic-ui-react";
import task from "models/task";

export default function HomePage({tareas}) {
  return (
    <Container>
      <Card.Group itemsPerRow={4}>
        {
          tareas.map(tarea => (
            <Card key={tarea._id}>
              <Card.Content>
                <Card.Header>{tarea.title}</Card.Header>
              </Card.Content>
            </Card>
          ))
        }
      </Card.Group>
    </Container>
  )
}

export const getServerSideProps = async (ctx) => {
  const res = await fetch('http://localhost:3000/api/tasks/');
  const tareas = await res.json();
  
  return{
    props: {
        tareas
    }
  }
}

问题原因 #

核心问题是前端组件中错误导入了Mongoose的Task模型。Mongoose是后端专属依赖，只能在Node.js环境（比如NextJS的API路由、getServerSideProps等服务端执行的代码）中运行，无法在浏览器的客户端环境正常工作。

当你在HomePage组件（会在客户端渲染）中导入models/task时，Mongoose的代码会被打包到客户端bundle中，在浏览器运行时，由于缺少Node.js环境的必要API和MongoDB连接上下文，导致timestamps初始化环节的get方法调用失败（上下文为null），从而触发报错。

解决方案 #

1. 移除客户端组件中的Mongoose模型导入
   删除HomePage组件开头的import task from "models/task";语句——你的组件只需要使用getServerSideProps返回的tareas数据进行渲染，完全不需要直接操作Mongoose模型。

2. 严格区分服务端与客户端代码边界
   所有涉及Mongoose的代码（模型定义、数据库操作）只能放在服务端执行的文件中：比如API路由文件、getServerSideProps/getStaticProps函数内部，绝对不要在客户端组件中导入或执行这些代码。

验证 #

修改后重新启动项目，客户端不会再加载Mongoose相关代码，报错会消失，同时页面依然能正常渲染从API获取的任务数据。

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