如何用Docz渲染接口之外的TypeScript枚举、联合类型定义

I've run into this exact issue with Docz before—its default <Props> component relies on React Docgen Typescript, which struggles to parse standalone enums/union types when they're directly used as a component's props type. Here are three reliable solutions:

1. Wrap the Enum/Union in a Dummy Interface (Simplest Fix) #

Docz works best with interface-defined props, so wrap your standalone type in a minimal interface that exposes the type as a single prop. This lets React Docgen Typescript extract the full type details correctly.

Update your interface.tsx: #

import { UserOrganisation, UserLevel } from "~/packages/database-interfaces/src";

// Wrap enum in an interface
export interface UserLevelProps {
  level: UserLevel;
}
// Use the interface as props instead of the raw enum
export const UserLevelC = (props: UserLevelProps) => {};

// Your existing interface component stays the same
export const UserOrganisationC = (props: UserOrganisation) => {};

Then in your index.mdx: #

---
name: users
menu: Database/Realtime
---
import { Props } from "docz";
import { UserLevelC, UserOrganisationC } from "./Interface.tsx";

# Interface
## Properties
### Type UserOrganisation
<Props of={UserOrganisationC} />
### Type UserLevel
<Props of={UserLevelC} />

This will render the level prop with all the UserLevel enum values listed, just like it does for your interface-based component.

2. Configure Docz's Type Parser to Recognize Enums #

If you don't want to add dummy interfaces, you can tweak Docz's underlying type parser (React Docgen Typescript) to extract literal values from enums and union types directly.

Create/Update doczrc.js in your project root: #

export default {
  typescript: true,
  propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json', {
    // Enable extraction of enum literal values
    shouldExtractLiteralValuesFromEnum: true,
    // Clean up optional prop display
    shouldRemoveUndefinedFromOptional: true,
    // Allow parsing of union types as props
    shouldExtractValuesFromUnion: true,
  }),
};

After adding this config, restart your Docz dev server—your original component setup (using enums/unions directly as props) should now render correctly in <Props>.

3. Build a Custom Type Display Component (For Full Control) #

If you want to customize how enums/unions are displayed (beyond Docz's default styling), build a simple reusable component to render them manually:

Create CustomTypeDisplay.tsx: #

import React from 'react';

interface CustomTypeDisplayProps {
  typeName: string;
  type: 'enum' | 'union';
  values: string[];
}

export const CustomTypeDisplay = ({ typeName, type, values }: CustomTypeDisplayProps) => {
  return (
    <div className="custom-type-display">
      <h3>Type {typeName}</h3>
      <p><strong>{type === 'enum' ? 'Enumeration Values' : 'Union Type Options'}</strong></p>
      <ul>
        {values.map(val => (
          <li key={val}><code>{val}</code></li>
        ))}
      </ul>
    </div>
  );
};

Use it in your index.mdx: #

import { CustomTypeDisplay } from './CustomTypeDisplay.tsx';

### Type UserLevel
<CustomTypeDisplay 
  typeName="UserLevel" 
  type="enum" 
  values={['employee', 'owner', 'admin', 'disabled']} 
/>

### Type Foo (Union Example)
<CustomTypeDisplay 
  typeName="Foo" 
  type="union" 
  values={['option1', 'option2']} 
/>

This gives you full control over styling and layout, which is great for documenting shared types that don't map directly to a component's props.

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