跟随Next.js 14教程时Payload CMS出现TypeError问题求助

场景与问题详情 #

跟着YouTube教程《Build a Complete Digital Marketplace with Next.js 14, React, tRPC, Tailwind》用Payload CMS搭建后台管理面板，代码完全复刻教程步骤，执行yarn dev时触发以下错误：

ERROR (payload): TypeError: Cannot set property query of # which has only a getter

教程里作者通过注释代码解决过同类错误，但我操作后问题仍存在。目前http://localhost:3000可正常访问，http://localhost:3000/sell页面仅显示加载动画，无法渲染内容。涉及核心文件：server.ts、payload.config.ts、get-payload.ts。

排查方案 #

1. 升级Payload版本
   这个错误大概率是Payload旧版本与Next.js 14的请求对象处理不兼容导致的，直接升级到最新稳定版：

yarn add payload@latest

2. 简化Payload启动逻辑
   检查server.ts中是否有多余的自定义请求处理代码，替换为最基础的Payload启动逻辑：

import { buildHandler } from '@payloadcms/nextjs';
import config from './payload.config';

export default buildHandler({ config });

3. 修正Payload初始化逻辑
   确保get-payload.ts中的初始化代码仅在服务端运行，避免客户端环境触发错误：

import getPayload from 'payload';
import config from './payload.config';

let payloadInstance: typeof getPayload | null = null;

export const getPayloadClient = async () => {
  if (!payloadInstance) {
    payloadInstance = await getPayload({
      config,
      initOptions: {
        local: process.env.NODE_ENV === 'development',
      },
    });
  }
  return payloadInstance;
};

4. 添加页面错误捕获
   在/sell页面组件中加入错误捕获，排查是否因API请求失败导致加载卡死：

export default async function SellPage() {
  try {
    const payload = await getPayloadClient();
    // 业务逻辑代码
  } catch (err) {
    console.error('Sell page load error:', err);
    return <div>加载失败，请检查控制台日志</div>;
  }
}

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