Why is the recordId undefined ? LWC

Problem : I have my LWC inside an Order page, but can't retrieve the recordid which is undefined.

Here's a screenshot of my LWC:

• the header is the standard part with data stored in SF
• below the Collapse/Expand link, is custom and I retrive data from an API without storing it in SF
  

Here's my code:

JS file:

import { LightningElement, track, api } from 'lwc';
import getCustomerOrder from '@salesforce/apex/icCTRLCustomerOrder.getCustomerOrder';

export default class IcOrderDetails extends LightningElement {

@track customerOrder;
@track doDetail;
@track paymentDetail;
@track doDetails;
@api recordId;
connectedCallback(){
    this.fetchOrderDetails();
}
fetchOrderDetails(){
    //getCustomerById({})
    console.log('recordId ', this.recordId);
    let customerOrderNumber = 'XXXXXX';

    getCustomerOrder({customerOrderNumber:customerOrderNumber})
    .then(data => {

        this.customerOrder = data;
        this.doDetails = data.paymentDetails;
        console.log('this.customerOrder ', this.customerOrder);

        for(let i = 0; i < data.doDetails.length; i++){
            this.doDetail = data.doDetails[i]; 
            for(let j = 0; j < data.doDetails[i].doLineItems.length; j++) {
                this.doLineItem = data.doDetails[i].doLineItems[j]; 
            }

        }

        for(let i = 0; i < data.paymentDetails.length; i++){
            this.paymentDetail = data.paymentDetails[i];
        }

    }).catch(error => {
        window.console.log('callout error ', JSON.stringify(error));
    })
}

}

Meta file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
    <target>lightning__RecordPage</target>
</targets>

HTML file:

   template>
 <lightning-record-view-form record-id={recordId} object-api-name="Order">
  <template if:true={customerOrder}>
      <div class="slds-form" role="list" >
        <div class="slds-form__row">
          <div class="slds-form__item" role="listitem">
            <div class="slds-form-element slds-form-element_readonly slds-form-element_horizontal slds-hint-parent">
              <span class="slds-form-element__label">
                Shipping Address</span>
              <div class="slds-form-element__control">
                <div class="slds-form-element__static">
                  
                  <template if:true={doLineItem.shippingInfo}>

                  <lightning:textarea>
                    {doLineItem.shippingInfo.shippingAddress.firstName} {doLineItem.shippingInfo.shippingAddress.lastName}
              <br />{doLineItem.shippingInfo.shippingAddress.addressLine1} {doLineItem.shippingInfo.shippingAddress.addressLine2}
              <br />{doLineItem.shippingInfo.shippingAddress.city} {doLineItem.shippingInfo.shippingAddress.stateProv} {doLineItem.shippingInfo.shippingAddress.postalCode}
            </lightning:textarea></template>
                </div>
              </div>
            </div>
          </div>
          </div>
          </div>
</template>
 </lightning-record-view-form>
  </template >

I've looked at multiple posts but already did the solutions that were given. What did I miss ?

ETA complete JS file