【TypeScript + NextJS】ContextProvider子要素のデータ型エラーの解決

Question

実現したいこと

画面状態の遷移をContext + useReducerで外部管理して、
複数のコンポーネントからモードとその更新用関数を参照すること

学習なので本番実装を想定して、React.FC<Props>などは使いたくない

発生している問題・分からないこと

Providerの子要素になっているReactコンポーネントの返り値をすべてReactElementやReactNodeに変えているのにも関わらず なぜかElement[]と判断され、props等が存在しないといわれ怒られている状態なのですが、なぜ、Elementと判断されているのでしょうか？

エラーメッセージ

型 '{ children: Element[]; }' には 型 'ReactElement<any, string | JSXElementConstructor<any>>[]' からの次のプロパティがありません: length, pop, push, concat、29 など。ts(2740)

該当のソースコード

export default function MainPage():ReactElement {
  return (
      <DisplayModeProvider>
        <Header/>
        <Main/>
      </DisplayModeProvider>
      
  )
}

export default function Header():ReactElement{
    return (
        <div>
            <img src="/logo.svg" className={styles.logo}/>
            <Navigation menu_strs = {[
                C_MODE_STR.MODE_MUSTLIST_STR,
                C_MODE_STR.MODE_SETTING_STR,
                C_MODE_STR.MODE_HOWTONOTICE_STR
            ]} orders = {C_MENU_ORDERS}
            ></Navigation>
            <hr></hr>
        </div>
    );
}

export default function Navigation({
    menu_strs,
    orders,
}:{menu_strs:T_C_MODE_STR[],orders:number[]}):ReactElement{
    const {mode,DispatchMode}= useContext(DisplayModeContext);
    
    
    return (
        <div>
            {/* メニュー一覧 */}
            <div className={Navigationstyles.menubox}>
                {
                    orders.map(
                        (order) => {
                            return(
                                <div    
                                className={`
                                    ${Navigationstyles.menu} 
                                    ${Navigationstyles.hover_color} 
                                    ${GetModeStrFromMode(mode) === menu_strs[order] ? 
                                        Navigationstyles.menu_selected : 
                                        ""}
                                     
                                `} 
                                    onClick={(e) => {
                                        DispatchMode(
                                            {
                                                mode:menu_strs[order]
                                            }
                                        )
                                        
                                        }
                                    }
                                > 
                                    <IconLib 
                                        type = {menu_strs[order]} 
                                        classname = {Navigationstyles.menu_icon}
                                    />
                                    {menu_strs[order]}
                                </div> 
                            ) 
                        }
                    )
                }
            </div>
           </div>
    )
}

import { C_MODE_STR } from "@/resources/Constant";
import ListIcon from '@mui/icons-material/List';
import SettingsIcon from '@mui/icons-material/Settings';
import HelpCenterIcon from '@mui/icons-material/HelpCenter';
import { T_C_MODE_STR } from "@/types/types";
import { ReactElement } from "react";

/**
 * @module IconLib
 * @description typeに応じて、Iconを返す\
 * 新しいアイコンを使用する際はこのモジュールに追加し\
 * IconLib経由で使うこと
 * @param {I_IconlibParam} param : {\
 *     type : C_MODE_STR内のいずれか\
 *     classname : 使用したいstylename 必須ではない\
 * }
 */
export default function IconLib({type,classname}:{type:T_C_MODE_STR,classname:string}):ReactElement{
    // typeの取得
    let work_classname = "";
    if(classname != undefined){
        work_classname = classname;
    }
    //typeに応じたアイコンの表示
    switch(type){
        case C_MODE_STR.MODE_SETTING_STR:
            return(
                <ListIcon className={work_classname}/> 
            );
        case C_MODE_STR.MODE_MUSTLIST_STR:
            return(
                <SettingsIcon className={work_classname}/>
            );
        case C_MODE_STR.MODE_HOWTONOTICE_STR:
            return(
                <HelpCenterIcon className={work_classname}/>
            );
        default:
            return(<HelpCenterIcon className={work_classname}/>);
    }

}

import { useReducer,ReactElement } from "react";
import {
    C_MODE,
    C_MODE_STR
} from "../../resources/Constant";
import { C_MSG_WARN_TRANSIT
 } from "@/resources/ErrorWarnString";
import { Dispatch,ReducerAction ,useRef} from "react";
import type { 
    T_TransitModeAction,
    T_C_MODE
} from "@/types/types";
import { createContext } from "react";
/**
 * @method TransitModeState
 * @description 画面状態遷移
 * @param {T_C_MODE} state 
 * @param {T_TransitModeAction} action {mode: C_MODE_STRに定義されているいずれか}
 * @returns {T_C_MODE} result_state 遷移判定後の画面状態
 */
export function TransitModeState(state:T_C_MODE,action:T_TransitModeAction):T_C_MODE{
    let result_state:T_C_MODE = state;
    switch(action.mode){
        case C_MODE_STR.MODE_MUSTLIST_STR:
            result_state = C_MODE.MODE_MUSTLIST;
        case C_MODE_STR.MODE_SETTING_STR:
            result_state = C_MODE.MODE_SETTING;
        case C_MODE_STR.MODE_HOWTONOTICE_STR:
            result_state = C_MODE.MODE_HOWTONOTICE;
        default:
            console.warn(C_MSG_WARN_TRANSIT);
    }

    return result_state;
}

/**
 * @method GetModeStrFromMode
 * @description 現在のMODEをもとにMODE_STRを取得する
 * @param {number} mode
 * @return {string} MODE_STR 各モードに紐づけられた、文字列
 */
export function GetModeStrFromMode(mode:number):string{
    switch(mode){
        case C_MODE.MODE_MUSTLIST:
            return C_MODE_STR.MODE_MUSTLIST_STR;
        case C_MODE.MODE_SETTING:
            return C_MODE_STR.MODE_SETTING_STR;
        case C_MODE.MODE_HOWTONOTICE:
            return C_MODE_STR.MODE_HOWTONOTICE_STR;
        default:
            return "";
    }
}



export const DisplayModeContext = createContext(
    {} as {
        mode:T_C_MODE,
        DispatchMode: Dispatch<T_TransitModeAction>
    }
);




/**
 * @module DisplayMode
 * @method DisplayModeProvider
 * @description 画面モード遷移用コンテキスト
 * @param {ReactNode} children contextを使用する際のprovider
 */
 export default function DisplayModeProvider(children:ReactElement[]):ReactElement{
    

    const [mode, DispatchMode] = useReducer(
                                        TransitModeState,
                                        C_MODE.MODE_INIT
                                );
    
    
    return(
        <DisplayModeContext.Provider
        value = {
            {
                mode,
                DispatchMode
            }
        }
        >
            {children}
        </DisplayModeContext.Provider>

    )
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

エラー文やProvider 子要素 複数やReactコンポーネントデータ型などで検索
nextjs,react 公式ドキュメント typescriptのページを確認

Providerの子要素すべて(マテリアルUI以外)の戻り値をReactNode,ReactElementに変更
子要素が複数なのが問題なのかとProviderの引数のデータ型をReactNode | ReactNode[] のUnionにしたりReactElementとその配列のユニオンにしたり変更している
ただ、引数のデータ型をユニオンにしてもいかのエラーが出るだけで、進展なし

型 '{ children: Element[]; }' を型 'IntrinsicAttributes & (ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[])' に割り当てることはできません。

補足

特になし

Answer 1

// Before
  export default function DisplayModeProvider(children:ReactElement[]):ReactElement{

// After
  export default function DisplayModeProvider({ children } : { children: ReactElement[] }): ReactElement {

children は、通常の Props と同じで、第一引数として受け取ったオブジェクトのプロパティの一つとして受け取ります。

参照: 公式ドキュメント

https://ja.react.dev/learn/passing-props-to-a-component#passing-jsx-as-children