How do I properly call an associated model in a component?

I get undefined when I do the console.log(this.get('item.product.description')); in the component object and an error message in ember inspector, console tab:

Uncaught TypeError: Cannot read property 'length' of undefined

I suspect this is happening because item.product.description is coming from a promise (async call). On page load, the promise isn't fulfilled yet. However, what I don't want to do, is create a .then block in the component, like:

this.get('item.product').then((product) => {

This just makes the component not so isolated, since it expects item.product to be a promise, instead of an actual string.

What other approaches should I consider?:

// Route
import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.find('user', params.user_id);
  }
});

// Template
{{#each item in model.jobOrders.lastObject.checkout.items}}
  {{product-card item=item}}
{{/each}}

The component:

// Component template
<p class="name">{{item.product.name}}</p>
<p class="description">{{truncatedDescription}}</p>

// Component object
import Ember from 'ember';

export default Ember.Component.extend({
  truncatedDescription: Ember.computed('item.product.description', function() {
    console.log(this.get('item.product.description'));

    var truncatedText = this._truncate(this.get('description'), 48);
    console.log(truncatedText);

    return truncatedText;
  }),

  actions: {
    // ...
  },

  // Private
  _truncate(text, limit) {
    if (text.length > limit){
      text = text.substr(0, limit - 3) + '...';
    }
    console.log(text);
    return text;
  }
});