TypeScript / JSX类型断言仅在JSX外部有效

我有一个反应成分，它通过一个数组映射。

每个数组项都有一个可选的ID类型。

如果我有此ID，则将呈现一个元素，否则将不显示任何内容。

该元素具有一个onClick，该onClick调用一个函数来接受ID作为参数。

即使我检查我是否有ID，TypeScript仍然会抱怨ID可能是未定义的，而是仅在onClick方法内部而不是外部（请参见代码示例）

这是为什么？如何使该错误消失？

请在TypeScript操场上查看错误：

// fake bindings
declare namespace React {
  function createElement(): any;
}

// This type has an optional prop
type SampleType = {
  id?: string;
  name: string;
}

const sampleArray: SampleType[] = [{id: 'test', name: 'Adrian'}, {name: 'Florescu'}]

function sampleFunction(id: string){
  console.log('ID', id);
}

function SampleComponent() {
  return (
    <div>
      {sampleArray.map((item: SampleType) => {
        if(item.id) {
          sampleFunction(item.id); // This works
          return <p onClick={() => { sampleFunction(item.id); }}>{item.name}</p>; //// This does not work
        }
      })}
    </div>
  )
};

const dom = <SampleComponent />;