The expected type comes from property 'field' which is declared here on type 'IntrinsicAttributes & TextProps'

Question

In terms of Sitecore NextJS, I'm a complete beginner. This problem is beyond my knowledge. Please assist me in resolving the following issues.

Complete Code:

  import {
  Text,
  Field,
  withDatasourceCheck,
  Item,
  Image as JssImage,
  ImageField,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';
type IconTitleDescriptionListProps = ComponentProps & {
  fields: {
    title: Field<string>;
    description: Field<string>;
    IconTitleDescriptionList: Item[];
    image: ImageField;
  };
};
const IconTitleDescriptionList = (props: IconTitleDescriptionListProps): JSX.Element => (
  <section className="py-5" id="features">
    <div className="container px-5 my-5">
      <div className="row gx-5">
        <div className="col-lg-4 mb-5 mb-lg-0">
          <h2 className="fw-bolder mb-0">
            <Text field={props?.fields?.title} />
          </h2>
          <p className="mb-0">{props?.fields?.description?.value}</p>
        </div>
        <div className="col-lg-8">
          <div className="row gx-5 row-cols-1 row-cols-md-2">
            {props?.fields?.IconTitleDescriptionList?.map((element, index) => {
              return (
                <div key={index} className="col mb-5 h-100">
                  <div className="feature bg-primary bg-gradient text-white rounded-3 mb-3">
                    <i className="bi bi-collection"></i>
                  </div>
                  <JssImage classsName="img-fluid rounded-3 my-5" field={element?.fields?.image} />
                  <h1 className="h1">
                    <Text field={element?.fields?.title} />
                  </h1>
                  <p className="h3">
                    <Text field={element?.fields?.SubTitle} />
                  </p>
                  <p className="mb-0">
                    <Text field={element?.fields?.description} />
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  </section>
);
export default withDatasourceCheck()<IconTitleDescriptionListProps>(IconTitleDescriptionList);

Errors:

#Error 1:

 (property) ImageProps.field?: ImageField | ImageFieldValue | undefined
Image field data (consistent with other field types)

Type 'Item | Item[] | Field<GenericFieldValue> | undefined' is not assignable to type 'ImageField | ImageFieldValue | undefined'.
  Type 'Item' is not assignable to type 'ImageField | ImageFieldValue | undefined'.
    Type 'Item' is not assignable to type 'ImageFieldValue'.
      Index signature for type 'string' is missing in type 'Item'.ts(2322)
Image.d.ts(35, 5): The expected type comes from property 'field' which is declared here on type 'IntrinsicAttributes & ImageProps'

# Error 2:

(property) TextProps.field?: TextField | undefined
The text field data.

Type 'Item | Item[] | Field<GenericFieldValue> | undefined' is not assignable to type 'TextField | undefined'.ts(2322)
Text.d.ts(9, 5): The expected type comes from property 'field' which is declared here on type 'IntrinsicAttributes & TextProps'

Reference screens :

Answer 1

Check your @sitecore-jss/sitecore-jss-nextjs version, if it is 20.1.0 or later then use NextImage component

It shows how to display a responsive, optimized, editable image:-

<NextImage field={props.fields.image} height="51" width="204" />

below example shows how to display a non-editable image where you control the resizing and editing:

<NextImage
  field={props.fields.image}
  editable={false}
  unoptimized={true}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"/>

Here's a Link https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/configuring-the-jss-nextimage-component.html

Answer 2

You need to use something like this

<Text field={element?.fields?.SubTitle as Field} />