JavaScript — TypeError: Cannot read properties of undefined

#Что означает ошибка

Ошибка «Cannot read properties of undefined (reading 'x')» значит, что код пытается обратиться к свойству значения, которого на самом деле нет. Переменная содержит undefined (или null), а вы пишете obj.x или arr[0].name. JavaScript не может «достать» свойство у пустоты и выбрасывает TypeError.

В консоли браузера в скобках указано имя свойства, которое не удалось прочитать, а ниже — стек вызовов со строкой файла. Это главный ключ: по имени свойства и строке почти всегда можно найти место, где ожидаемый объект не пришёл.

Проверяйте значение на undefined и используйте optional chaining.

#Причины и решения

#Пошаговое решение

1. Найдите точное место обращения к undefinedОткройте страницу и нажмите F12 → Console («Консоль»); воспроизведите ошибку и нажмите ссылку имя-файла:номер-строки в сообщении. Если код сжат, во вкладке Sources нажмите кнопку форматирования {}. Посмотрите, что стоит слева от свойства, указанного после reading, например в user.profile.name это могут быть user или user.profile. Сохраните стек вызовов.
2. Проверьте реальное значение без раскрытия данныхОткройте исходный код проекта и перед проблемной строкой временно добавьте, например, console.log("user exists", user !== undefined, "profile exists", user?.profile !== undefined);, заменив user названием своей переменной. Перезагрузите страницу и прочтите вывод. Не выводите целые объекты с паролями, ключами и персональными данными, особенно в общедоступные журналы.
3. Уточните, когда должны появиться данныеЕсли данные приходят с сервера, откройте F12 → Network → запрос API → Response/Preview: убедитесь, что ответ успешный и нужное поле действительно существует. Если переменная заполняется после await fetch(...), обращайтесь к ней только после завершения загрузки. Если используется DOM, проверьте существование элемента после загрузки страницы: document.querySelector() при отсутствии элемента возвращает null, а не undefined.
4. Исправьте источник значения, а не только сообщениеКогда поле необязательно, используйте user?.profile?.name ?? "Имя не указано". Это подходит, если отсутствие имени допустимо по логике программы. Если поле обязательно, проверьте структуру входных данных и покажите понятную ошибку до обращения к свойству. **Не подставляйте пустой объект {} повсюду**: так можно скрыть ошибку авторизации или неверный ответ API.
5. Для React/Vue отдельно учтите первую отрисовкуВ компонентах данные могут ещё не загрузиться при первом показе страницы. Выведите состояние загрузки до обращения к свойству; например в React if (loading) return <p>Загрузка…</p>; и затем обработайте отсутствие обязательных данных. Следите, чтобы переменные loading, data и error обновлялись после ответа сервера. Не исправляйте проблему простым подавлением ошибки в try/catch.
6. Проверьте обе ветви: с данными и безПовторите сценарий на обычном ответе API и на допустимом пустом ответе. Если ошибка больше не возникает, интерфейс должен показывать корректное значение или понятное уведомление. Уберите временные console.log; если проблема осталась, передайте разработчику файл/строку, стек и обезличенный пример структуры ответа.

#Откуда берётся undefined

Данные ещё не загрузились (запрос выполняется асинхронно, а код обращается к результату сразу); сервер вернул пустой ответ или другую структуру; элемент DOM не найден (getElementById вернул null); массив пустой, а вы читаете первый элемент; опечатка в имени свойства.

#Безопасное чтение

Используйте оператор необязательной цепочки: user?.profile?.name вернёт undefined вместо ошибки. Для значений по умолчанию применяйте ??: const city = user?.address?.city ?? 'не указан'. Но не используйте их как «затычку»: если данные обязаны быть, лучше выяснить, почему их нет.

#Диагностика

Поставьте точку останова на строке из стека или выведите console.log перед обращением. Проверьте вкладку Network: пришёл ли ответ, какой статус и тело. Если используется React, убедитесь, что компонент не рендерится до получения данных (добавьте проверку загрузки).