首次集成Flow静态检查JS代码，遇‘非多态类型’报错求助

Hey there! Let’s tackle this Flow error you’re hitting: Flow: is not a polymorphic type when extending your React component classes. I’ve run into this exact issue before with generic React components, so let’s break it down step by step.

What’s Causing This Error? #

This error almost always pops up when your parent component (in your case, Callout) is a generic/polymorphic class, but your child component (ErrorMessage) doesn’t properly handle the parent’s generic type parameters during inheritance. Flow gets confused because it can’t resolve the parent class’s polymorphic nature when the child doesn’t pass along or declare the necessary type info.

Let’s Fix It With Your Example #

First, let’s assume your Callout component is set up as a generic component (common for reusable UI elements like callouts). Here’s how that might look:

// @flow
import React from 'react';

// Generic props for the base Callout
type CalloutProps<T> = {
  message: string,
  extraContext?: T, // Generic field for flexible extra data
};

// Parent component with a generic type parameter
class Callout<T> extends React.Component<CalloutProps<T>> {
  render() {
    return (
      <div className="callout">
        <p>{this.props.message}</p>
        {this.props.extraContext && <div className="context">{this.props.extraContext}</div>}
      </div>
    );
  }
}

The Wrong Way (Triggers the Error)

If you try to extend Callout without handling its generic parameter, Flow throws the "not a polymorphic type" error:

// ❌ Error: Flow: is not a polymorphic type
class ErrorMessage extends Callout {
  render() {
    return (
      <div className="callout error">
        {this.props.message}
      </div>
    );
  }
}

The Right Ways to Fix It

You have two solid options depending on your use case:

1. Specify a concrete type for the parent’s generic parameter
   If ErrorMessage doesn’t need the generic extraContext field, or uses a specific type for it, explicitly pass that type to Callout:

   // @flow
   // Case 1: No extra context needed (use `void` to signal no type)
   class ErrorMessage extends Callout<void> {
     render() {
       return (
         <div className="callout error">
           <p>{this.props.message}</p>
         </div>
       );
     }
   }
   
   // Case 2: Use a specific type for extra context
   type ErrorContext = { errorCode: number, timestamp: string };
   class ErrorMessage extends Callout<ErrorContext> {
     render() {
       return (
         <div className="callout error">
           <p>{this.props.message}</p>
           {this.props.extraContext && (
             <small>Error Code: {this.props.extraContext.errorCode}</small>
           )}
         </div>
       );
     }
   }
   

2. Make the child component generic too
   If you want ErrorMessage to retain the flexibility of the parent’s generic type, declare it as a generic class and pass the type parameter up to Callout:

   // @flow
   class ErrorMessage<T> extends Callout<T> {
     render() {
       return (
         <div className="callout error">
           <p>{this.props.message}</p>
           {this.props.extraContext && <div className="context">{this.props.extraContext}</div>}
         </div>
       );
     }
   }
   

Quick Check for Edge Cases #

If your Callout isn’t a generic component but you’re still seeing this error, double-check the parent component’s type annotations. Sometimes misusing typeof or incomplete type declarations can make Flow misinterpret the class as non-polymorphic when it should be.

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