Cannot read properties of undefined - ошибка JavaScript и как исправить

Ошибка Uncaught TypeError: Cannot read properties of undefined (reading '...') остаётся одной из самых распространённых проблем в JavaScript в 2024–2026 годах. Она встречается в браузере, Node.js, React, Next.js, Vue, API-клиентах и практически любом современном веб-приложении.

Если вы видите сообщение:

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

это означает, что JavaScript пытается получить доступ к свойству объекта, который в данный момент имеет значение undefined.

Несмотря на простоту формулировки, причина ошибки далеко не всегда очевидна. В современных приложениях она чаще всего связана с асинхронностью, серверным рендерингом, API и неправильной обработкой данных.

В этом руководстве разберём все популярные варианты ошибки, реальные примеры из React и Next.js, а также современные способы защиты кода.

Как быстро исправить ошибку Cannot read properties of undefined

Если времени на диагностику нет, сначала проверьте четыре вещи.

Во-первых, убедитесь, что объект действительно существует.

Во-вторых, проверьте, что данные успели прийти из API.

В-третьих, используйте optional chaining:

user?.profile?.name

В-четвёртых, проверьте, не происходит ли рендер компонента раньше загрузки данных.

В большинстве случаев проблема находится именно в одном из этих пунктов.

Что означает ошибка Cannot read properties of undefined

Рассмотрим самый простой пример:

const user = undefined;

console.log(user.name);

JavaScript пытается получить свойство name, но переменная user не содержит объект. Вместо этого она имеет значение undefined, поэтому интерпретатор генерирует исключение TypeError.

Важно понимать: ошибка возникает не из-за свойства name, а из-за объекта слева от точки.

Почему ошибка стала встречаться чаще в 2024–2026 годах

За последние годы архитектура JavaScript-приложений значительно усложнилась.

Сегодня разработчики используют:

• React 18 и React 19;

• Next.js App Router;

• Server Components;

• SSR и Streaming;

• TanStack Query;

• асинхронные API;

• микрофронтенды.

Из-за этого приложение может рендериться несколько раз ещё до того, как данные будут полностью загружены. Именно поэтому ошибки undefined встречаются значительно чаще, чем несколько лет назад.

Cannot read properties of undefined (reading 'name')

Это классический вариант ошибки.

const user = undefined;

console.log(user.name);

Обычно причина заключается в том, что объект ещё не был создан или данные не были загружены.

Правильный вариант:

console.log(user?.name);

или:

if (user) {
    console.log(user.name);
}

Cannot read properties of undefined (reading 'map')

Одна из самых популярных ошибок в React.

Пример:

users.map(user => user.name);

Ошибка возникает, если users ещё не содержит массив.

Например, API-запрос ещё выполняется:

const [users, setUsers] = useState();

Современный подход:

(users || []).map(user => user.name);

или:

users?.map(user => user.name);

В проектах React 18 и React 19 именно этот сценарий остаётся самым распространённым.

Cannot read properties of undefined (reading 'length')

Ошибка возникает, когда код пытается получить длину несуществующего массива или строки.

Например:

console.log(data.length);

Если data не определён:

const length = data?.length || 0;

Подобные ошибки часто встречаются в таблицах, фильтрах и поисковых системах.

Cannot read properties of undefined (reading 'forEach')

Ошибка появляется при обработке коллекций.

Например:

data.forEach(item => {
    console.log(item);
});

Если данные не были получены, приложение аварийно завершится.

Современное решение:

(data || []).forEach(item => {
    console.log(item);
});

Cannot read properties of undefined (reading 'push')

Такой вариант обычно связан с неправильной инициализацией массива.

Например:

let users;

users.push('Alex');

Исправленный вариант:

let users = [];

users.push('Alex');

Cannot read properties of undefined (reading 'includes')

Ошибка часто встречается при поиске и фильтрации данных.

Например:

if (user.roles.includes('admin')) {
    // ...
}

Если массив ролей отсутствует, код завершится ошибкой.

Безопасный вариант:

if (user?.roles?.includes('admin')) {
    // ...
}

Ошибка при работе с fetch API

Одна из самых частых причин ошибки в современных приложениях.

Например:

const response = await fetch('/api/user');
const data = await response.json();

console.log(data.user.name);

Разработчик предполагает, что API обязательно вернёт объект пользователя.

Однако сервер может вернуть:

{
  "error": "Unauthorized"
}

или:

{
  "user": null
}

Правильная обработка:

console.log(data?.user?.name);

Ошибка axios: response undefined

При работе с Axios разработчики часто забывают, что полезные данные находятся внутри свойства data.

Ошибка:

const response = await axios.get('/api/user');

console.log(response.user.name);

Правильно:

const response = await axios.get('/api/user');

console.log(response.data?.user?.name);

Даже в 2026 году эта ошибка остаётся одной из самых частых причин проблем во frontend-приложениях.

Ошибка в React 18 и React 19

Рассмотрим типичный пример:

function Profile({ user }) {
    return <h1>{user.name}</h1>;
}

При асинхронной загрузке данных React сначала выполнит рендер без объекта user, что приведёт к ошибке.

Современное решение:

function Profile({ user }) {
    return <h1>{user?.name}</h1>;
}

или:

function Profile({ user }) {
    if (!user) {
        return <>Loading...</>;
    }

    return <h1>{user.name}</h1>;
}

Ошибка в Next.js 15 и App Router

После появления Server Components подобные ошибки стали встречаться ещё чаще.

Например:

export default function Page({ profile }) {
    return <div>{profile.name}</div>;
}

Если сервер вернул пустые данные или произошла ошибка гидратации, приложение завершится с TypeError.

Поэтому для современных Next.js-приложений рекомендуется использовать безопасный доступ к данным по умолчанию.

Ошибка в TanStack Query

Очень популярный сценарий 2025–2026 годов.

Например:

const { data } = useQuery({
    queryKey: ['users'],
    queryFn: getUsers
});

return data.users.map(user => user.name);

На первом рендере data обычно равно undefined.

Правильный вариант:

return data?.users?.map(user => user.name);

Ошибка в Zustand и Redux Toolkit

При работе с глобальным состоянием проблема возникает, когда store ещё не инициализирован.

Например:

const user = useUserStore(state => state.user);

console.log(user.name);

Если состояние ещё не загружено, приложение завершится с ошибкой.

Поэтому современные приложения используют безопасный доступ и значения по умолчанию.

Как найти источник ошибки за 30 секунд

Когда возникает ошибка TypeError, не стоит сразу переписывать код.

Сначала посмотрите, какое свойство указано в сообщении об ошибке. Затем проверьте объект слева от точки. После этого выясните, откуда приходит это значение: из API, props, state, store или DOM.

Практика показывает, что реальная причина почти всегда находится на один шаг раньше места падения программы.

Для диагностики полезно временно добавить:

console.log(data);
console.log(data?.user);
console.log(data?.user?.profile);

Как защититься от ошибки в современных проектах

В 2026 году профессиональные команды используют несколько уровней защиты.

Во-первых, применяется optional chaining:

user?.profile?.settings?.theme

Во-вторых, используются значения по умолчанию:

const users = data?.users ?? [];

В-третьих, активно применяется TypeScript strict mode.

Наконец, всё чаще используется runtime-валидация через Zod и аналогичные библиотеки.

FAQ

Почему возникает Cannot read properties of undefined?

Потому что код обращается к свойству объекта, который не существует в момент выполнения.

Почему ошибка особенно часто появляется в React?

Из-за асинхронной загрузки данных и повторных рендеров компонентов.

Почему map вызывает ошибку undefined?

Потому что метод map можно применять только к массивам.

Что лучше использовать: if или optional chaining?

Для большинства современных проектов рекомендуется optional chaining.

Чем отличается undefined от null?

Undefined означает отсутствие значения, а null - намеренно заданное пустое значение.

Заключение

Ошибка Uncaught TypeError: Cannot read properties of undefined остаётся одной из главных проблем JavaScript-разработки в 2026 году. Причина её появления почти всегда связана с асинхронностью, отсутствием проверок или неправильной структурой данных.

Использование optional chaining, строгой типизации, проверки API и современных подходов к управлению состоянием позволяет устранить подавляющее большинство подобных ошибок ещё до выхода приложения в продакшен.