Next.js 14调用OpenAI API报错：Cannot read properties of undefined (reading 'completions')

问题描述 #

在Next.js 14项目中调用OpenAI API时，出现以下报错：

Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'completions')

相关代码文件如下：

config.ts #

'use server'
import OpenAI from "openai"

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY
})

export default openai

actions.ts #

import openai from "@/config/openai"
export const generateRecommendations = async () => {
    const content = "test";
    const data = await openai.chat.completions.create({
      messages: [{ role: "user", content }],
      model: 'gpt-3.5-turbo'
    })

    return data
}

调用代码 #

import { fetchAnimeInfo, generateRecommendations } from '@/server-actions/actions';
const getRecommendations = async () => {
    const data = await generateRecommendations();
    console.log(data)
}

// button onclick

报错原因分析 #

1. OpenAI实例初始化失败：若OPENAI_API_KEY环境变量未正确配置或未加载，会导致OpenAI实例创建失败，openai对象变为undefined，访问openai.chat时触发报错。
2. Server Action未正确标记：config.ts带有'use server'指令，仅能在服务器端运行。若generateRecommendations函数未标记为Server Action，在客户端组件调用时，导入的openai会被Next.js置为undefined，进而引发错误。
3. OpenAI版本不兼容：若使用的是OpenAI v3及以下版本，API结构与v4不同，openai.chat.completions不存在，会导致属性读取失败。

解决方法 #

1. 检查并配置环境变量 #

• 在项目根目录创建/编辑.env.local文件，添加OpenAI密钥：

  OPENAI_API_KEY=你的OpenAI密钥
  

• 重启Next.js开发服务器（修改环境变量后需重启生效）。
• 在config.ts中添加环境变量校验，提前捕获错误：

  'use server'
  import OpenAI from "openai"
  
  if (!process.env.OPENAI_API_KEY) {
    throw new Error('请配置OPENAI_API_KEY环境变量')
  }
  
  const openai = new OpenAI({
      apiKey: process.env.OPENAI_API_KEY
  })
  
  export default openai
  

2. 标记Server Action #

在actions.ts的generateRecommendations函数上方添加'use server'指令，确保函数仅在服务器端执行：

'use server'
import openai from "@/config/openai"
export const generateRecommendations = async () => {
    const content = "test";
    const data = await openai.chat.completions.create({
      messages: [{ role: "user", content }],
      model: 'gpt-3.5-turbo'
    })

    return data
}

3. 验证OpenAI版本 #

确保安装的是OpenAI v4版本，执行以下命令更新：

npm install openai@latest
# 或使用yarn
yarn add openai@latest

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