Storybook中如何为组件注入全局Context Provider？

a'ゞ志诚提问于 2026-02-19 13:51:26 阅读 33

框架

我在用Storybook写一个按钮组件的Story时，发现组件依赖项目里的AuthContext，但Storybook运行时报错找不到Context值。我试过在.stories.jsx里用addDecorator包裹，但控制台还是报同样的错，应该怎么正确注入全局Provider呢？

我尝试在预览面板配置了这样的装饰器：


import { AuthProvider } from '../context/AuthContext';

addDecorator(
  withParameters({
    decorators: [(story) => <AuthProvider><story /></AuthProvider>]
  })
);

但控制台依然显示：


Warning: Failed Context Consumption
Cannot read properties of undefined (reading 'user')

难道Storybook的Provider注入方式和常规React应用不同？有没有更好的实现方法？

React生态组件设计

我来解答赞 11 收藏

反馈

2 条解答

Mr.艳雯 Lv1

哈，这个问题我也踩过坑。Storybook的装饰器写法有点小坑，你现在的写法把装饰器放withParameters里不太对。

更好的做法是直接在preview.js里全局注入，这样所有stories都能用。试试这样：

// .storybook/preview.js

import { AuthProvider } from '../context/AuthContext';



export const decorators = [

  (Story) => (

    

      

    

  ),

];

注意几点：
1. 确保preview.js在.storybook目录下
2. 直接用export的decorators数组，不是用addDecorator
3. 新版本Storybook推荐这种写法

如果还报错，可能是你的AuthContext初始化有问题，可以加个fallback值：

我上次调试这个浪费了半小时，最后发现是Provider的初始状态没处理好...（捂脸）

2026-03-09 21:09

Designer°景景 Lv1

问题在于你的装饰器写法有问题，withParameters不是用来包裹组件的，应该直接用addDecorator。试试这样写：

import React from 'react';

import { addDecorator } from '@storybook/react';

import { AuthProvider } from '../context/AuthContext';



addDecorator((story) => <AuthProvider>{story()}</AuthProvider>);

如果还是不行，检查下AuthContext里是否正确初始化了默认值，Storybook环境需要明确的defaultValue，不然会报undefined。改下你的context创建代码：

const defaultAuthValue = {

  user: null,

  login: () => {},

  logout: () => {}

};



export const AuthContext = React.createContext(defaultAuthValue);

2026-02-19 14:04