Styled-Components服务端renderToString触发useContext读取空值错误

API 探路者

2026-6-29

服务端使用Styled-Components时useContext读取null的问题解决

问题原因

Styled-Components依赖自身的Context管理样式注入逻辑，服务端直接调用renderToString时，组件树未被Styled-Components的上下文Provider包裹，导致内部useContext调用无法获取有效上下文，从而抛出Cannot read properties of null (reading 'useContext')错误。

解决步骤

引入Styled-Components服务端工具
使用ServerStyleSheet和StyleSheetManager搭建服务端渲染所需的上下文环境，同时收集组件生成的样式。
修改服务端渲染代码
将目标组件用StyleSheetManager包裹，并传入ServerStyleSheet实例，确保Styled-Components在服务端正常工作：

import React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
import ReportPartComponent from './your-component-path';

// 服务端渲染逻辑
const sheet = new ServerStyleSheet();
try {
  const headerElement = React.createElement(
    StyleSheetManager,
    { sheet: sheet.instance },
    React.createElement(ReportPartComponent, { 
      reportPart: ReportPartEnum.Header, 
      parameters, 
      expressionEvaluator, 
      timeZone: auth.site.timeZone, 
      reportVersion, 
      dataSourcesWithData 
    })
  );
  const header = renderToString(headerElement);
  // 可选：收集生成的样式，后续可注入到HTML模板中
  const serverStyles = sheet.getStyleTags();
} catch (err) {
  console.error('服务端渲染失败:', err);
} finally {
  sheet.seal();
}