开发环境正常，生产构建时Stack.Item类型错误如何解决？

问题原因 #

你在运行时给Stack函数组件挂载了Item静态属性，但TypeScript默认的函数类型里并没有定义这个属性，所以生产构建的严格类型检查会报错。开发环境可能因为类型检查配置宽松（比如skipLibCheck开启、noImplicitAny关闭等）没触发错误，但生产构建的严格模式会检测出这个类型不匹配问题。

修复步骤 #

1. 完善Stack组件的类型定义 #

在Stack组件文件（比如Stack.tsx）中，先明确组件props类型，再定义包含静态属性的组件类型：

// 定义Stack组件的props类型，根据你的实际参数调整
type StackProps = {
  children: React.ReactNode;
  spacing?: 's' | 'm' | 'l';
  showDivider?: boolean;
  alignItems?: React.CSSProperties['alignItems'];
};

// 定义带有Item静态属性的Stack组件类型
type StackComponent = React.FC<StackProps> & {
  Item: React.FC<{ children: React.ReactNode }>; // 这里根据Item组件的实际props调整类型
};

// 给Stack组件指定类型
const Stack: StackComponent = ({ children, spacing = 'm', showDivider = false, alignItems }) => {
  // 你的组件渲染逻辑...
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: spacing, alignItems }}>
      {children}
    </div>
  );
};

export default Stack;

2. 调整index.ts的导出逻辑 #

此时TypeScript已经能识别Stack上的Item属性，直接赋值导出即可：

import Stack from './Stack';
import Item from './subcomponents/Item';

Stack.Item = Item;

export { Stack };

3. 验证效果 #

现在使用<Stack.Item>时，TypeScript会正确识别这个属性，生产构建的类型检查就能通过了。建议把tsconfig.json中的strict设为true，这样开发阶段就能提前发现这类类型问题，避免生产构建失败。

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