Перейти к содержанию
  • Лента
  • Категории
  • Последние
  • Метки
  • Популярные
  • Пользователи
  • Группы
Свернуть
exlends
Категории
  1. Главная
  2. Категории
  3. Фронтенд
  4. NextJs
  5. PageProps Type Errors in Next.js. Type '{ slug: string; }' is missing the following properties from type 'Promise<any>'

PageProps Type Errors in Next.js. Type '{ slug: string; }' is missing the following properties from type 'Promise<any>'

Запланировано Прикреплена Закрыта Перенесена NextJs
errorsreactjs
1 Сообщения 1 Постеры 564 Просмотры 1 Отслеживают
  • Сначала старые
  • Сначала новые
  • По количеству голосов
Ответить
  • Ответить, создав новую тему
Авторизуйтесь, чтобы ответить
Эта тема была удалена. Только пользователи с правом управления темами могут её видеть.
  • AladdinA Не в сети
    AladdinA Не в сети
    Aladdin
    js
    написал в отредактировано admin
    #1

    После обновления Next js до 15 версии, в динамических маршрутах разработчики некоторые изменения, что приведет к ошибкам при сборке проекта.

    пример:

    Type error: Type 'Props' does not satisfy the constraint 'PageProps'.
      Types of property 'params' are incompatible.
        Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
    

    Разработчики сделали динамические параметры асинхронными, поэтому нужно будет поменять типы, и получать их мы должны, например, через await

    до 15 версии:

    
    // СТАРЫЙ КОД
    type Props = {
      params: {
        slug: string;
      };
    };   
    
    export async function generateMetadata({ params: { slug } }: Props) {
      const { category } = await fetchData(slug);
    
      ...
      }
    }
    
    export default async function Page({ params: { slug } }: Props) {
      const  data = await fetchData(slug);
    
      ...
    }
    

    после 15 версии:

    // НОВЫЙ КОД
    type Props = {
      params: Promise<{
        slug: string;
      }>;
    };  
    
    export async function generateMetadata(props: Props) {
      const { slug } = await props.params;
      const { category } = await fetchData(slug);
      ...
      }
    }
    
    export default async function Page(props: Props) {
      const { slug } = await props.params;
      const  data = await fetchData(slug);
      ...
    }
    

    Источник

    1 ответ Последний ответ
    👍
    2

    Здравствуйте! Похоже, вас заинтересовала эта беседа, но у вас ещё нет аккаунта.

    Надоело каждый раз пролистывать одни и те же посты? Зарегистрировав аккаунт, вы всегда будете возвращаться на ту же страницу, где были раньше, и сможете выбирать, получать ли уведомления о новых ответах (по электронной почте или в виде push-уведомлений). Вы также сможете сохранять закладки и ставить лайки постам, чтобы выразить свою благодарность другим участникам сообщества.

    С вашими комментариями этот пост мог бы стать ещё лучше 💗

    Зарегистрироваться Войти

    Категории

    • Главная
    • Новости
    • Фронтенд
    • Бекенд
    • Языки программирования

    Контакты

    • Сотрудничество
    • info@exlends.com

    © 2024 - 2026 ExLends, Inc. Все права защищены.

    Политика конфиденциальности
    • Войти

    • Нет учётной записи? Зарегистрироваться

    • Войдите или зарегистрируйтесь для поиска.
    • Первое сообщение
      Последнее сообщение
    0
    • Лента
    • Категории
    • Последние
    • Метки
    • Популярные
    • Пользователи
    • Группы