类型“WriteableDraft”上不存在属性“id”<note> | 可写草稿<{}></note>

Question

I am converting my ReactJS / Redux Toolkit app to Typescript. One issue that I am facing is I am not able to get the properties of the state object:

const useUpdatedData = (
  setNoteDescription: React.Dispatch<React.SetStateAction<string>>,
  setNoteData: React.Dispatch<
    React.SetStateAction<
      {
        fileName: string
        content: string
      }[]
    >
  >
) => {
  const { note } = useAppSelector((state) => state.notes)
  const { noteId } = useParams()

  useEffect(() => {
    if (noteId && noteId === **note.id**) {
      const filesData = filesObjectToArray(**note?.files**)
      const filesArray = filesData?.map((file) => {
        return {
          fileName: **file.filename**,
          content: **file.content**,
        }
      })

      setNoteDescription(note?.description)

      setNoteData(filesArray)
    }
  }, [noteId])
}

I have highlighted them with **.

Here's what the Interface looks like:

export interface Note {
  url: string
  id: string
  public: boolean
  created_at: string
  updated_at: string
  description: string
  files: {
    filename: {
      filename: string
      content: string
    }
  }
  owner: {
    login: string
    id: string
    avatar_url: string
  }
}

And here's the initial state:

interface NoteState {
  notes: Note[] | []
  userNotes: Note[] | []
  note: Note | {}
  searchedNote: Note | {}
  snackbar: {
    message: string
    type: string
    isOpen: boolean
  }
  forks: number
  deletedNote: string | null
  isSuccess: boolean
  isLoading: boolean
  isError: boolean
  isSearchError: boolean
  isStarred: boolean | undefined
  isForked: boolean | undefined
  isCreated: boolean
  isUpdated: boolean
  message: string | undefined
}

const initialState: NoteState = {
  notes: [],
  userNotes: [],
  note: {},
  searchedNote: {},
  snackbar: { message: "", type: "success", isOpen: false },
  forks: 0,
  deletedNote: null,
  isSuccess: false,
  isLoading: false,
  isError: false,
  isSearchError: false,
  isStarred: false,
  isForked: false,
  isCreated: false,
  isUpdated: false,
  message: "",
}

Clearly, the id property exists in the interface then why does it say it doesnt?

Answer 1

note can be Note | {} Note | {} , that is a Note or an empty object. TypeScript is not letting you access the id property since it may not exist.

You can make this work by adding another check 'id' in note , which will narrow down the type to Note and then you can access .id :

if (noteId && 'id' in note && noteId === note.id) {