Property does not exist on type ‘never’ in React – How to fix it?

This article will show you how to fix the error “Property does not exist on type ‘never'” in React in some ways, such as using the generic typing method or the array type method.

Why does the error “Property does not exist on type ‘never'” in React happen?

When we try to access a property on a value of type never, or when TypeScript gets confused while parsing our code, we get the error “Property does not exist on type ‘never'”. This error often happens to those who are new to Typescript and Reactjs. Look at the example below:

const App = () => {
  type User = {
    id: number,
  };
  var user: User | null = null;
 
  function setUser() {
    user = { id: 1 };
  }
  setUser();
  if (user == null) {
    console.log('user is null');
  } else {
    console.log(user.id);
  }
  return (
    <>
      <h2>Property does not exist on type 'never' in React | LearnShareIT</h2>
      <hr/>
      <h3>{user.id}</h3>
    </>
  );
};
 
export default App;

Output:

When you have assigned the id value to the user, but the program does not recognize it, the error “Property does not exist on type ‘never'” appears, so how to fix it? Please follow the next part of the article.

How to fix this error?

Using [ ] method

By using [] instead of a dot to access the type of object in the Typescript, the program will be able to recognize the type of user in the above error example. Let’s try it.

Code:

const App = () => {
  type User = {
    id: number,
  };
  var user: User | null = null;
 
  function setUser() {
    user = { id: 1 };
  }
  setUser();
  if (user == null) {
    console.log('user is null');
  } else {
    console.log("User id : "+user['id']);
  }
  return (
    <>
      <h2>Property does not exist on type 'never' in React | LearnShareIT</h2>
    </>
  );
};
 
export default App;

Output:

Adding data type method

When you use this way, we can access Property of type User without getting the error “Property does not exist on type ‘never'” like using dot to access.

This solution will work when you have not added the data type for the type in the program, like the following code:

const App = () => {
  const User = {
   // Missing data type
    id:[],
  };

However, when you add a data type to the Property of type User, you can change the error “Property does not exist on type ‘never'” of the program when compiled. Pay attention to the code that needs to be replaced with the error code below:

const User = {
   // Adding data type
    id:number[],
  };

So you can fix the error of the program in some simple ways. Good luck with them!

Summary

To sum up, you’ve learned two ways to fix the “Property does not exist on type ‘never'” in React error. You can use them flexibly to fix the error in different cases. Thank you for reading!

Maybe you are interested:

• React.js: Property ‘children’ does not exist on type ‘#’
• Property does not exist on type ‘JSX.IntrinsicElements’
• Property ‘value’ does not exist on type HTMLElement

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs