reactjs - "El objeto posiblemente está indefinido" en un campo observable

Recuperar datos y establecer un arreglo observable, aquí está el código a continuación:

import {observable} from 'mobx';

export interface IMenuModel{
    Id:number
    itemName:string;
    parentId?:number;    
}
 class MenuRepo {
    @observable menuItems? : IMenuModel[];
    constructor(){
    }
    getItems():void {
    fetch(`..`).then((response: Response): Promise<{ value:IMenuModel[] }>  => {
              return response.json();
            })
             .then((response: { value: IMenuModel[] }) : void => {
               this.menuItems = response.value;

      }, (error: any): void => {
        //exception handling
      });
    }
}

var menuCodes = new MenuRepo
export default menuCodes;

esta es la clase observador;

import * as React from 'react';
import {observer} from 'mobx-react';
import {IMenuModel} from './Codes';

@observer
class Menu extends React.Component<{params?:IMenuModel[]}, {}> {
  render() {
    debugger
    var menuJSX : JSX.Element[] = this.props.params.map((item:IMenuModel, i:number)=>{
      return (<li key={item.Id}>{item.itemName}</li>)
    });
    return (
      <div>
        Hello World!!!!
        <br />
        {menuJSX}
      </div>
    );
  }
}
export default Menu;

También encuentro el error anterior ("this.props.params" subrayado en rojo): El objeto posiblemente es 'undefined'

No podía averiguar cómo arreglarlo... y este es el componente principal;

import menuCodes from './components/Codes';
    class App extends React.Component<null, null> {
      render() {
        return (
          <div className="App">
            <Menu params = {menuCodes.menuItems}/>
          </div>
        );
      }
    }

Respuesta #1

Creo que este es un error específico de Typescript.

Tu propiedad params en tu componente Menu es opcional. Así que, estoy suponiendo que en tu componente MenuCodes, menuCodes.menuItems puede ser undefined a veces.

Si estás iterando sobre this.props.params, y puede estar indefinido en algún momento, necesitas incluir una condición en la asignación de tu variable menuJSX para tener en cuenta cuando menuCodes.menuItems (y por lo tanto props.params) está indefinido.

Algo como este ternario:

const { params } = this.props
var menuJSX : JSX.Element[] = params 
  ? params.map((item:IMenuModel, i:number) =>
    <li key={item.Id}>{item.itemName}</li>
  )
  : [];