Sentry Answers>React>

How to fix the forbidden non-null assertion in TypeScript and React?

How to fix the forbidden non-null assertion in TypeScript and React?

Matthew C.

—

The Problem

When using typescript-eslint in a JavaScript application, you may encounter the following error:

Click to Copy
@typescript-eslint/no-non-null-assertion
warning: Forbidden non-null assertion

The following example code would cause this error:

Click to Copy
const loggedInUsername = "bob";

const users = [
  { name: "Steven", age: 12 },
  { name: "Lisa", age: 32 }
];

const loggedInUser = users.find((u) => u.name === loggedInUsername);
console.log(loggedInUser!.age);

You can see a live demo of this error in this typescript-eslint playground.

For this error to occur, the eslintrc file has the “no-non-null-assertion” rule set to "error":

Click to Copy
"rules": {
  "@typescript-eslint/no-non-null-assertion": "error"
}

The Non-null Assertion Operator (Postfix !) assertion removes the null and undefined types from a value. To use it, add the ! symbol after an expression like in the console log example above. When your TypeScript configuration is set to do "strictNullChecks", use the non-null assertion operator to bypass the null and undefined type checks. It should only be used if you know a specific value won’t be null or undefined at runtime.

The Solution

Your error message may include a solution to the error:

Click to Copy
Consider using the optional chain operator `?.` instead. This operator includes runtime checks, so it is safer than the compile-only non-null assertion operator.

To fix the example code above, use the optional chain operator when accessing the age property of the loggedInUser:

Click to Copy
console.log(loggedInUser?.age);

If the age property does not exist on the loggedInUser object, the expression will result in undefined instead of throwing an error.

  • Sentry BlogGuide to Error & Exception Handling in React
  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Sentry BlogSentry can’t fix React hydration errors, but it can really help you debug them
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • SentryReact Debug Hub
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2025 • Sentry is a registered Trademark of Functional Software, Inc.