Перейти к содержанию
  • Категории
  • Последние
  • Метки
  • Популярные
  • Пользователи
  • Группы
Свернуть
Логотип бренда
Категории
  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 Постеры 274 Просмотры 1 Watching
  • Сначала старые
  • Сначала новые
  • По количеству голосов
Ответить
  • Ответить, создав новую тему
Авторизуйтесь, чтобы ответить
Эта тема была удалена. Только пользователи с правом управления темами могут её видеть.
  • JspiJ Не в сети
    JspiJ Не в сети
    Jspi
    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

    • Войти

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

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