getFieldValue not compatible with Item.fields property

[coreyasmith]

Description

The getFieldValue<T> helper method https://github.com/Sitecore/jss/blob/5a75ff9f307f9e78e788b51f84538e78514c9cdc/packages/sitecore-jss/src/layout/utils.ts#L25 is not compatible with the Item.fields property https://github.com/Sitecore/jss/blob/5a75ff9f307f9e78e788b51f84538e78514c9cdc/packages/sitecore-jss/src/layout/models.ts#L127 so field values can't be extracted from "ContentList" field types using the getFieldValue<T> method without casting.

getFieldValue<T> expects type ComponentRendering or { [name: string]: Field | Item[] }, but Item.fields is of type { [name: string]: Field | Item | Item[] | undefined; }, so Item.fields cannot be passed to getFieldValue.

Expected behavior

In the Styleguide-FieldUsage-ContentList component (https://github.com/Sitecore/jss/blob/dev/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-ContentList.tsx), I should be able to use getFieldValue on lines 37 or 48 as follows, without casting:

<p>
  Field: {getFieldValue<string>(listItem.fields, "textField")}
</p>

Steps To Reproduce

Try to pass the fields of an item in a multilist or treelist field to the getFieldValue<T> helper method as described above.

Possible Fix

Change the Fields type in jss/utils.ts https://github.com/Sitecore/jss/blob/5a75ff9f307f9e78e788b51f84538e78514c9cdc/packages/sitecore-jss/src/layout/utils.ts#L3 to:

type Fields = { [name: string]: Field | Item | Item[] | undefined; }; 

Your Environment

• Sitecore Version: 9.3
• JSS Version: 12
• Browser Name and version: N/A
• Operating System and version (desktop or mobile): N/A
• Link to your project (if available): N/A

Screenshots

No screenshots necessary.

[illiakovalenko]

I added an issue to the backlog, we will triage that