"Object is possibly undefined" in React and TypeScript

You Always have to check for possible null or undefined values.

This is how I would do it to make it 100% safe

return (<div> {
    certificate && certificate.length > 0 ? (
      certificate.map((item, index) => ( 
      <S.Contents key = {index}> {item}</S.Contents>
      ))
    ) : null
  } </div>)

You get this error because you used an optional property for certificate. You need to add a check for undefined, to make sure it is actually defined. Assuming your react function looks something like this, this would be a fast way to solve your issue:

function ReactComponent(props: {
    certificate?: any[]
}) {
  const certificate = props.certificate || [];
  
  return (
        {certificate.map((certificateItem) => (
            <S.Contents>{certificateItem}</S.Contents>
        ))}
  );
}

This line const certificate = props.certifate || []; assigns the first value if it is not undefined to the variable certificate otherwise the second. An if statement would also work but would be more verbose in this case:

function ReactComponent(props: {
    certificate?: any[]
}) {
  let certificate = props.certificate;

  if(typeof certificate === "undefined") {
      certificate = [];
  }
  return  (
    <div>
        {certificate.map((certificateItem) => (
            <S.Contents>{certificateItem}</S.Contents>
        ))}
    </div>
  );
}