createPortal - TypeScript document.getElementById type issue when JavaScript runs fine?

Question

I'm trying to use ReactDOM.createPortal and neither 'ReactDOM' or 'document' is highlighted in VSCode and I get this error when hovering over 'document.getElementById('overlay-root')':

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
  Type 'null' is not assignable to type 'Element'.

Here's the code:

import styles from './CartModal.module.css';
import ReactDOM from 'react-dom';
import Card from '../UI/Card/Card';

interface CartModalProps {
  onClose?: () => void
}

const DisplayCartModal: React.FC<CartModalProps> = (props) => {

  return ReactDOM.createPortal(
    <>
      <CartModal />
    </>, 
    document.getElementById('overlay-root')
  )
}

export default DisplayCartModal;

I've tried switching the file extension to .js to see if this is a TypeScript error and indeed when I changed it (and removed TS-specific syntax) everything was highlighted and worked perfectly. It did not return null, it returned the correct HTML Element. Help is greatly appreciated!

Answer 1

The issue is, document.getElementById('overlay-root') might be null. You (I assume) know that it will not be, but Typescript does not know that.

You can assert that not-null-ness with an exclamation mark, like so:

ReactDOM.createPortal(
<>
  <CartModal />
</>, 
document.getElementById('overlay-root')!
)

If your assertion is false, you will get a run-time error, a very bad thing.