How to fix Cannot read properties of undefined (reading 'x') in TypeScript

{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true
  }
}

// Before (throws error if user is undefined):
const userName = user.profile.name;

// After (returns undefined instead of crashing):
const userName = user?.profile?.name;

// Or with optional array access:
const firstItem = items?.[0];

// Or optional function calls:
const result = callback?.();

// Chain multiple optional accesses:
const email = user?.profile?.contact?.email;

// If user.name is undefined or null, use 'Guest':
const displayName = user?.name ?? 'Guest';

// Chain multiple checks:
const email = user?.contact?.email ?? user?.fallbackEmail ?? '[email protected]';

// Note: ?? only treats null/undefined as falsy, not 0 or ''
const count = data?.count ?? 0; // Works correctly even if count is 0
const active = data?.isActive ?? false; // Safe for boolean

// Simple null check
if (user) {
  const userName = user.name;
}

// Check nested values
if (data && data.items && data.items.length > 0) {
  const firstItem = data.items[0];
}

// Type guard function for reusable checks
function isDefined<T>(value: T | undefined | null): value is T {
  return value !== null && value !== undefined;
}

const users = [user1, undefined, user2].filter(isDefined);
// users is now typed as User[]

// Narrowing with if checks
const processUser = (user: User | undefined) => {
  if (!user) {
    console.log('No user provided');
    return;
  }
  // Inside this block, TypeScript knows user is User (not undefined)
  console.log(user.name);
};

// Bad: variable is undefined
let user;
const name = user.name; // TypeScript error: Object is possibly 'undefined'

// Good: explicitly initialize
let user: User | undefined = undefined;
if (user) {
  const name = user.name; // Safe inside the if block
}

// Good: always initialize to a default
let user: User = getDefaultUser();
const name = user.name; // Always safe

// Good: use Optional type
interface UserProfile {
  name: string;
  email?: string; // This property can be undefined
  age: number;    // This property is required
}

const profile: UserProfile = { name: 'John', age: 30 };
const email = profile.email ?? 'no-email'; // Safe with nullish coalescing

interface ApiResponse {
  user?: {
    id: string;
    name: string;
    profile?: {
      avatar?: string;
    };
  };
}

// Safely handle API responses
async function fetchUser(id: string) {
  const response: ApiResponse = await fetch(`/api/user/${id}`).then(r => r.json());

  // Safe navigation with optional chaining
  const userName = response?.user?.name ?? 'Unknown';
  const avatar = response?.user?.profile?.avatar ?? '/default-avatar.png';

  // Or validate upfront with type guards
  if (!response.user) {
    throw new Error('User not found');
  }

  return {
    name: response.user.name, // Safe now
    avatar: response.user.profile?.avatar ?? '/default-avatar.png',
  };
}