NextJs中TypeError: 无法读取undefined的'User'属性问题求助

错误根源 #

你遇到的TypeError: Cannot read properties of undefined (reading 'User')，核心原因有两点：

1. 客户端组件调用服务器端专属API：Prform.js是标记为"use client"的客户端组件，但直接调用了依赖getServerSession的getUserSession函数——getServerSession仅能在服务器端组件/API路由中运行，客户端环境下无法正常初始化相关依赖，导致用户模型加载失败。
2. 模型初始化时机不匹配：即使在服务器端，User模型的初始化依赖Mongoose连接完成，但客户端调用时的环境未正确完成数据库连接与模型初始化流程，最终导致mongoose.models.User为undefined。

具体修复步骤 #

1. 重构用户会话获取逻辑，通过API路由中转 #

创建服务器端API路由app/api/session/route.js，专门处理会话获取：

import { getServerSession } from "next-auth/next";
import { authOptions } from "../auth/[...nextauth]/route";

export async function GET(request) {
  const session = await getServerSession(authOptions);
  if (!session) {
    return Response.json({ error: "Unauthorized" }, { status: 401 });
  }
  const { name, email, id, account_type: type } = session.user;
  return Response.json({ name, email, id, type });
}

2. 修改getUserSession为客户端兼容版本 #

更新lib/utils.js中的getUserSession函数，改为从API路由获取数据：

export const getUserSession = async () => {
  try {
    const res = await fetch("/api/session", { cache: "no-store" });
    if (!res.ok) throw new Error("Failed to fetch session");
    return await res.json();
  } catch (error) {
    console.error("Session fetch error:", error);
    return null;
  }
};

3. 修正Prform.js中的状态初始化逻辑 #

移除初始useState中对异步函数的直接调用，统一在useEffect中处理数据加载：

"use client";
import { getUserSession } from '../../../../../lib/utils';
import React, { useEffect, useState } from 'react'

function Prform() {
    const [pending, setPending] = useState(false);
    const [userid, setUserid] = useState('');
    const [message, setMessage] = useState('');
    const [data, setData] = useState({
      title: '',
      category: '',
      description: '',
      clientName: '',
      budget: 0,
      deadline: '',
    });

    useEffect(() => {
        const fetchData = async () => {
          const sessiondata = await getUserSession();
          if (sessiondata) {
            setUserid(sessiondata.id || '');
            setData(prev => ({
              ...prev,
              clientName: sessiondata.name || ''
            }));
          }
        };
        fetchData();
      }, []);

    // 其余提交、输入变更逻辑保持不变
    const handleSubmit = () => {
        setPending(true)
        try {
            console.log(data, userid)
            setMessage('Data Recieved')
            setPending(false)
            
        } catch (error) {
            setPending(false)
            setMessage('Error')
            console.log(error)
        }
    }

    const onChange = (e) => {
        setData({
            ...data,
            [e.target.id]: e.target.value
        })
    }

    return (/* 原JSX内容 */)
}

4. 确保服务器端模型初始化正确 #

检查app/api/auth/[...nextauth]/route.js，确保在使用User模型前已完成数据库连接：

import { connectDB } from "@/lib/db_connection";
import User from "@/models/usermodel";

// 在next-auth配置前先连接数据库
connectDB();

// 其余next-auth authOptions配置

额外检查点 #

• 确认.env.local中的MONGOURI配置正确，且MongoDB服务正常运行
• 清除Next.js缓存：执行npx next dev --clear-cache后重启开发服务器
• 所有涉及数据库操作、getServerSession的逻辑，必须限制在服务器端组件或API路由中执行

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