无法在Jotai中使用环境变量，调用Contentful触发参数错误

问题根源 #

出现Uncaught TypeError: Expected parameter accessToken的核心原因是环境变量未被正确注入到客户端代码中，导致process.env.CONTENTFUL_ACCESS_KEY返回undefined，而Contentful客户端要求该参数必须存在。

直接写字符串能正常运行，说明Contentful客户端本身逻辑没问题；Jotai外部环境变量正常，说明环境变量在模块加载阶段可能还未完成注入，或者客户端环境无法读取到该变量。

解决方案 #

1. 检查环境变量的框架前缀 #

不同前端框架对客户端环境变量有前缀要求：

• Create React App：变量必须以REACT_APP_开头（如REACT_APP_CONTENTFUL_ACCESS_KEY）
• Vite：变量必须以VITE_开头（如VITE_CONTENTFUL_ACCESS_KEY）
• Next.js（客户端组件）：变量必须以NEXT_PUBLIC_开头（如NEXT_PUBLIC_CONTENTFUL_ACCESS_KEY）

确保你的.env文件中变量名符合对应框架的规则，同时代码中引用的变量名要和文件中一致。

2. 移除非空断言并添加前置校验 #

不要用!强制断言环境变量存在，这会掩盖变量未加载的问题。建议在初始化客户端前先校验：

import { createClient } from "contentful";

// 先校验环境变量是否存在
const spaceId = process.env.CONTENTFUL_SPACE_ID;
const accessToken = process.env.CONTENTFUL_ACCESS_KEY;

if (!spaceId || !accessToken) {
  throw new Error("请正确配置Contentful的SPACE_ID和ACCESS_KEY环境变量");
}

const client = createClient({
  space: spaceId,
  accessToken: accessToken,
});

export const asyncAtom = atom(async () => {
  const res = await client.getEntries<ILocations>({
    content_type: "locations"
  });
  return res.items;
});

export const loadableAtom = loadable(asyncAtom);

3. 延迟客户端初始化到Atom内部 #

如果环境变量在模块加载阶段未就绪（比如某些构建工具的异步加载逻辑），可以把客户端的创建放到asyncAtom内部，确保调用时环境变量已加载：

import { createClient } from "contentful";
import { atom, loadable } from "jotai";

export const asyncAtom = atom(async () => {
  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID!,
    accessToken: process.env.CONTENTFUL_ACCESS_KEY!,
  });
  const res = await client.getEntries<ILocations>({
    content_type: "locations"
  });
  return res.items;
});

export const loadableAtom = loadable(asyncAtom);

4. 验证环境变量是否正确注入 #

在代码中临时添加日志，确认环境变量的值：

console.log("SPACE_ID:", process.env.CONTENTFUL_SPACE_ID);
console.log("ACCESS_KEY:", process.env.CONTENTFUL_ACCESS_KEY);

如果输出undefined，说明环境变量未被正确注入，需要检查框架配置或.env文件的位置（必须放在项目根目录）。

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