TS2532: Object is possibly 'undefined'

The exact error string

function len(s?: string) {
  return s.length;
}
// error TS2532: Object is possibly 'undefined'.

const el = document.getElementById("app");
el.innerHTML = "";
// error TS2532: Object is possibly 'null'. (getElementById returns T | null)

How to diagnose it (where does undefined come from?)

TS2532 always points at a value whose type is T | undefined. Hover it and find why undefined is in the type — the source decides the cleanest fix:

• an optional param/field (s?: string, obj.maybe) → guard or default.
• an indexed access (arr[i], map[key]) under noUncheckedIndexedAccess → guard the result.
• a function that can return undefined (find, getElementById → null, a Map.get) → check before use.
• narrowing lost across a function call → copy to a const first.

Fix 1: optional chaining (quickest)

return s?.length;             // undefined instead of throwing
return s?.length ?? 0;        // with a fallback value

Fix 2: a guard (narrows the type)

function len(s?: string) {
  if (s === undefined) return 0;   // early return
  return s.length;                 // ✅ s is string here
}

if (el) el.innerHTML = "";         // narrowed inside the block

Fix 3: a default with ??

const value = s ?? "";           // never undefined from here
return value.length;

Fix 4: non-null assertion (only when certain)

const el = document.getElementById("app")!;   // you know #app exists
el.innerHTML = "";

Worked example: optional fields in API JSON

APIs omit optional fields, so a generated/accurate interface marks them ? — and then every access is correctly flagged by TS2532. That's the type system doing its job:

interface User { name: string; address?: { city: string } }  // address is optional

const user: User = await (await fetch("/api/user")).json();
user.address.city;               // error TS2532: Object is possibly 'undefined'
user.address?.city ?? "—";       // ✅ handle the missing case

Generate the interface from a real payload with JSON to TypeScript and mark genuinely-optional fields ? — TS2532 then forces you to handle exactly the cases the API can actually produce.

TS2532 in React

// 1) useContext with an undefined default
const Ctx = createContext<Theme | undefined>(undefined);
const theme = useContext(Ctx);
theme.color;                      // ❌ TS2532
// custom hook that throws if missing -> returns a defined Theme:
function useTheme() {
  const t = useContext(Ctx);
  if (!t) throw new Error("useTheme must be used within ThemeProvider");
  return t;                       // ✅ Theme, not Theme | undefined
}

// 2) router params / a find() result
const item = items.find(i => i.id === id);
item?.name;                       // ✅ find() can return undefined

Common variants of this message

Debugging checklist

• ✓ Hover the value — find why undefined is in its type
• ✓ Quick read? Optional chaining ?. (+ ?? fallback)
• ✓ Doing real work? if guard / early return to narrow
• ✓ Narrowing lost across a call? Copy to a const first
• ✓ React useContext? Throw-if-missing custom hook
• ✓ arr[i] with noUncheckedIndexedAccess? Guard the result
• ✓ Don't disable strictNullChecks to silence it