StoryBlok API 半数请求返回未处理运行时错误问题求助

问题背景 #

使用Next 14 + Storyblok开发时，页面跳转有50%概率触发错误：Uncaught TypeError: Cannot read properties of null (reading 'get')，原因是getStoryblokApi()偶尔返回null，无法调用get方法获取数据。

解决方案 #

方案1：手动创建Storyblok API实例（推荐） #

放弃依赖全局上下文注入的getStoryblokApi()，直接在每个服务器组件中手动初始化API实例，确保每次请求都能拿到有效实例：

import StoryblokClient from 'storyblok-js-client';

export default async function Home() {
  // 手动初始化API客户端
  const storyblokApi = new StoryblokClient({
    accessToken: process.env.SB_TOKEN,
  });

  // 正常获取数据
  const data = await storyblokApi.get(`cdn/stories/pages/home-page`, {
    version: "draft",
    language: lang,
  });
  const content = data.data.story.content;

  // 后续页面渲染逻辑
}

方案2：修复全局初始化的上下文问题 #

如果要保留storyblokInit的全局初始化方式，需要调整根布局的代码结构，并确保初始化逻辑在服务器端正确执行：

import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
import StoryblokBridgeLoader from '@storyblok/react/bridge-loader';

// 确保每次服务器请求都执行初始化
storyblokInit({
  accessToken: process.env.SB_TOKEN,
  use: [apiPlugin],
});

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {/* 将BridgeLoader放在body内部，保证DOM结构正确 */}
        <StoryblokBridgeLoader options={{}} />
      </body>
    </html>
  );
}

方案3：添加错误兜底处理 #

在页面中增加null判断和异常捕获，避免程序崩溃，同时提升用户体验：

import { getStoryblokApi } from '@storyblok/react';

export default async function Home() {
  const storyblokApi = getStoryblokApi();
  
  // 先判断API实例是否存在
  if (!storyblokApi) {
    return <div>内容加载中...</div>;
  }

  try {
    const data = await storyblokApi.get(`cdn/stories/pages/home-page`, {
      version: "draft",
      language: lang,
    });
    const content = data.data.story.content;
    // 渲染页面内容
  } catch (error) {
    console.error('Storyblok数据获取失败:', error);
    return <div>加载失败，请稍后重试</div>;
  }
}

方案说明 #

• 手动创建实例可以彻底避免全局上下文注入的不确定性，尤其适合Next.js 14的RSC环境；
• 调整根布局结构能保证StoryblokBridgeLoader在正确的DOM环境中初始化；
• 错误兜底处理可以在问题未完全解决时，防止页面直接崩溃，给用户友好提示。

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