Next.js与Mongoose应用报错：TypeError: Cannot read properties of null (reading 'get')

问题根源 #

你在页面组件pages/orders.js里直接导入了Mongoose模型Order，但Mongoose是Node.js后端专属库，根本不能在前端组件里用。Next.js页面会在服务器和客户端两端执行，客户端环境没有Mongoose的运行条件，导致模型初始化时抛出Cannot read properties of null (reading 'get')错误——这个错误发生在组件初始化阶段，所以useEffect连执行的机会都没有。

解决步骤 #

1. 删掉页面组件里的模型导入
   打开pages/orders.js，把顶部的import Order from "../models/Order";删掉。页面组件不需要直接碰数据库模型，所有数据请求都交给API路由处理就行。

2. 确保API路由正确处理订单查询
   检查你的/api/orders路由文件（没创建的话就新建），在里面导入Order模型并写查询逻辑，示例代码如下：

   // pages/api/orders.js
   import connectDB from '../../utils/connectDB'; // 你的数据库连接工具
   import Order from '../../models/Order';
   
   connectDB();
   
   export default async function handler(req, res) {
     if (req.method === 'GET') {
       const { user_id } = req.query;
       try {
         const orders = await Order.find({ user_id });
         res.status(200).json(orders);
       } catch (err) {
         res.status(500).json({ message: err.message });
       }
     } else {
       res.status(405).json({ message: 'Method not allowed' });
     }
   }
   

3. 修复客户端JWT验证的潜在问题
   虽然useEffect只在客户端执行，但为了避免服务器端渲染时出问题，可以在访问document前加个环境判断（可选，但更严谨）：

   useEffect(() => {
     async function fetchOrders() {
       if (typeof window === 'undefined') return;
       const res = await axios.get("/api/secret");
       const secret = res.data.secret;
       const token = cookie.parse(document.cookie).OursiteJWT;
       if (!token) {
         // 处理未登录情况，比如跳转到登录页
         return;
       }
       const decoded = jwt.verify(token, secret);
       const userId = decoded._id;
       const response = await axios.get(`/api/orders?user_id=${userId}`);
       setOrders(response.data);
     }
     fetchOrders();
   }, []);
   

4. 检查数据库连接
   确保你的Next.js项目在API路由里正确初始化了Mongoose连接，比如写个utils/connectDB.js统一处理连接逻辑，每个API路由都调用它，避免模型初始化时数据库还没连上导致的错误。

额外提醒 #

• Mongoose模型只能在Node.js环境（API路由、getServerSideProps这类服务器端代码）里用，绝对不能在前端组件里导入或使用。
• 前端组件只负责通过axios这类HTTP工具和API路由通信，数据库操作全交给后端API路由处理。

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