Fix “Cannot read properties of undefined” without guessing.

1. Read the expression from left to right

In result.activeProject.id, check each boundary: is result defined, is activeProject present, and is id available? The stack trace line is the symptom. Log a safe shape or use your debugger to find the first missing value; never paste tokens or customer data into a log.

const project = result?.activeProject;
if (!project || typeof project.id !== 'string') {
  renderEmptyState('Choose a project first');
  return;
}
openProject(project.id);

2. Decide what “missing” should mean

An absent value may be a normal first-run state, a storage migration, a failed request, or a contract violation. Name that state and handle it explicitly. Optional chaining can prevent a crash, but it should not silently turn a required value into undefined.

• For optional data, provide a visible empty state or a default.
• For required data, validate at the boundary and return a useful error.
• For asynchronous data, render loading and error states before reading nested fields.
• For persisted data, migrate old shapes and test a cleared store.

3. Verify the original failure and the nearby paths

Write down the input that failed, then test the smallest matrix that distinguishes the causes:

1. Valid object with a valid id.
2. Missing object on a first run or after storage is cleared.
3. Object with the wrong type or an empty identifier.
4. Slow or rejected request before data arrives.

Keep the guard close to the boundary and let the caller decide how to display the result. A test that only checks “does not throw” can still miss a broken empty state.